The CSS flex-direction property
The CSS flex-direction property decides whether flex items run in a row (the default, left to right) or a column (top to bottom). The row-reverse and column-reverse values flip the visual order. It also sets which axis justify-content and align-items act on.
Overview
flex-direction sets the main axis of a flex container, which is a fancy way of saying it decides whether the items sit side by side or stacked. The default, row, lays them out left to right; column stacks them top to bottom.
Because it defines the main axis, it quietly changes what the alignment properties do. In a row, justify-content works horizontally and align-items works vertically. Switch to column and the two swap — justify-content now runs top to bottom. That trips people up, so it is worth keeping in mind whenever a layout suddenly aligns the "wrong" way.
The row-reverse and column-reverse values reverse the visual order of the items. They are genuinely useful — for example, putting the most important button last in the markup but first on screen — but they come with an accessibility catch worth reading below.
Syntax
selector {
display: flex;
flex-direction: value;
}
/* stack on a card */
.card {
display: flex;
flex-direction: column;
}Values
The flex-direction property accepts the values below. Every property also accepts the CSS-wide keywords inherit, initial, revert and unset.
| Value | Description |
|---|---|
row |
Items flow left to right along a horizontal main axis. The default. |
column |
Items stack top to bottom along a vertical main axis. |
row-reverse |
Like row, but the visual order is reversed (right to left). |
column-reverse |
Like column, but the visual order is reversed (bottom to top). |
Example
<style>
.card {
display: flex;
flex-direction: column;
gap: 8px;
background: #f5f7fb;
padding: 16px;
border-radius: 10px;
font: 14px system-ui, sans-serif;
}
.card div { background: #1c7ce9; color: #fff; padding: 10px; border-radius: 6px; text-align: center; }
</style>
<div class="card">
<div>First</div>
<div>Second</div>
<div>Third</div>
</div>Best practices
- Use
columnfor stacked card layouts androwfor toolbars and nav bars — then let the alignment properties do the fine-tuning. - Remember the alignment axes swap with direction: in a column, justify-content controls vertical position and align-items controls horizontal.
- Combine
flex-directionwith a media query (row on desktop, column on mobile) for layouts that reflow without extra markup. - Avoid the reverse values purely for visual reordering — they desync the tab order. Reorder the HTML instead when the change is meaningful.
Accessibility
The reverse values — and the related order property — change only the visual order of flex items. They do not change the DOM order, which is what keyboard focus and screen readers follow. So a keyboard user can end up tabbing through your buttons right-to-left while seeing them left-to-right, which is disorienting.
The WCAG guidance on meaningful sequence is clear here: if the order matters, it should be correct in the markup. Use row-reverse for genuinely cosmetic flips, and when the reordering is meaningful, change the HTML so the visual and focus order stay in step.
Frequently asked questions
How do I stack flex items vertically?
flex-direction: column on the container. The items stack top to bottom instead of sitting in a row.