Main Axis Direction Property
Last updated: 2026-09-13
flex-direction Main Axis Direction Property
The flex-direction property defines the direction of the main axis in a flex container, that is, the direction in which flex items are laid out. By default, items are arranged horizontally from left to right (row). The property can switch the layout to vertical or to a reversed order. It is the most fundamental direction control in flexbox and determines which axis justify-content and align-items act upon.
| Category | |
|---|---|
| Initial Value | row |
| Inherited | No |
| Applies To | all |
| Animation Type | discrete |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
flex-direction: row | row-reverse | column | column-reverse;⚙️ Values
| Value | Type | Description |
|---|---|---|
row | row-reverse | column | column-reverse | Keyword | Direction of the flex main axis |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| flex-direction | ✓ v29 | ✓ v12 | ✓ v28 | ✓ v9 | ✓ v17 |
| Supported in all major browsers | |||||
Tip： row and row-reverse lay items out on a horizontal main axis; column and column-reverse use a vertical main axis. When the main axis changes, the axes controlled by justify-content and align-items swap accordingly.
Important： row-reverse and column-reverse only change the visual order of items, not the DOM order, so the screen-reader reading order and the Tab-key focus order are unaffected.
❓ FAQ
QHow do justify-content and align-items behave when flex-direction changes?
Aflex-direction defines the main axis: justify-content works on the main axis and align-items on the cross axis. With row, justify-content controls horizontal alignment and align-items controls vertical alignment; after switching to column the two axes are swapped. One practical consequence: with column, justify-content needs a definite container height to distribute space, just as align-items needs leftover cross-axis space in row. Always confirm the main axis direction first, because it decides which alignment property controls which direction.
QHow do I create a right-to-left layout?
AThere are two ways. flex-direction: row-reverse arranges the flex items from right to left and affects only that set of items. Setting direction: rtl on the container changes the writing and layout direction, so text and inline elements follow as well. The two look similar visually but differ semantically: prefer row-reverse when only the layout should be reversed, and use direction: rtl when the text direction must change too.
QWhat is the difference between flex-direction: column and writing-mode: vertical?
AThey are completely different. flex-direction: column only stacks the flex items vertically; each item is still an independent block and the text direction stays unchanged, so the text inside remains readable in horizontal lines. writing-mode: vertical-rl changes how the text itself is written so the characters run vertically. Use flex-direction: column for vertical layouts and writing-mode only for vertical typesetting of text such as traditional Chinese columns.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
Flex Wrap
Controls whether flex items wrap onto multiple lines
Flex Flow Shorthand
Shorthand for flex-direction and flex-wrap
