flex-direction
The flex-direction property sets the main axis of a flex container, controlling item flow direction.
Syntax
flex-direction: row | row-reverse | column | column-reverse;
Examples
.stack {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
Output
Stacks flex children vertically with half-rem spacing between them.
Notes
Changing the direction swaps which axis justify-content and align-items act on. row follows the writing direction (reversed in RTL). Reverse values also flip the visual order without changing DOM/tab order.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 29 |
| firefox | 28 |
| safari | 9.0 |
| edge | 12 |