flex-direction
Choose the main axis and visual direction of a flex layout.
Overview
| Class | Declarations |
|---|---|
flex-row | flex-direction: row;
|
flex-col | flex-direction: column;
|
flex-col-reverse | flex-direction: column-reverse;
|
flex-row-reverse | flex-direction: row-reverse;
|
flex-direction:<value> | flex-direction: <value>;
|
Examples
Lay out items in a row
flex-row sets the main axis along the inline direction. With horizontal writing and left-to-right text, the items run from left to right. flex on the parent establishes the flex formatting context.
<div id="layout" class="flex flex-row gap-sm"> <div id="item-1" class="flex:none h:4rem w:5rem p-sm">01</div> <div id="item-2" class="flex:none h:4rem w:5rem p-sm">02</div> <div id="item-3" class="flex:none h:4rem w:5rem p-sm">03</div></div>Generated CSS
@layer utilities { .flex { display: flex } .flex-row { flex-direction: row }}A row follows writing mode and text direction; it is not always physically horizontal or left-to-right.
Stack items in a column
flex-col sets the main axis along the block direction. In this horizontal writing mode, the three items stack downward with a 16px gap. Their explicit widths keep the cross-axis size visible.
<div id="layout" class="flex flex-col gap-md"> <div id="item-1" class="flex:none h:4rem w:5rem p-sm">01</div> <div id="item-2" class="flex:none h:4rem w:5rem p-sm">02</div> <div id="item-3" class="flex:none h:4rem w:5rem p-sm">03</div></div>Reverse visual order
flex-row-reverse and flex-col-reverse reverse the main axis. Compare the same three buttons in both directions. Focus Source 1, then press Tab: keyboard navigation still follows the source sequence even when the next button appears to its left or above.
<div id="layout" class="flex flex-row-reverse gap-sm"> <button id="item-1" type="button" tabindex="0" class="flex:none h:4rem w:5rem p-xs">Source 1</button> <button id="item-2" type="button" tabindex="0" class="flex:none h:4rem w:5rem p-xs">Source 2</button> <button id="item-3" type="button" tabindex="0" class="flex:none h:4rem w:5rem p-xs">Source 3</button></div><div id="layout" class="flex flex-col-reverse gap-sm"> <button id="item-1" type="button" tabindex="0" class="flex:none h:4rem w:5rem p-xs">Source 1</button> <button id="item-2" type="button" tabindex="0" class="flex:none h:4rem w:5rem p-xs">Source 2</button> <button id="item-3" type="button" tabindex="0" class="flex:none h:4rem w:5rem p-xs">Source 3</button></div>Visual reversal does not rewrite the DOM or reading order. Use it for independent items only when the source sequence remains meaningful; keep sequential tasks in their intended source order.
Apply conditionally
Use conditional queries to stack items by default and place them in a row from sm. Resize the iframe to change its real viewport width; the axis annotation and content height update with the layout.
<div id="layout" class="flex flex-col gap-sm flex-row@sm"> <div id="item-1" class="flex:none h:4rem w:5rem p-sm">01</div> <div id="item-2" class="flex:none h:4rem w:5rem p-sm">02</div> <div id="item-3" class="flex:none h:4rem w:5rem p-sm">03</div></div>Use gap, justify-content, and align-items to control spacing and alignment along the chosen axes.