On this page
CSS flex-direction: row, row-reverse, column & column-reverse Explained
What Is flex-direction in CSS?
The flex-direction property tells a flex container which way to lay out its items. It sets the main axis, and every other flexbox property, such as justify-content and align-items, works relative to that axis. If you are following a CSS flexbox tutorial, flex-direction is the first container property you must understand, because it changes how the whole flexbox layout behaves.
Syntax
.container {
display: flex;
flex-direction: row | row-reverse | column | column-reverse;
}The default value is row. The property only has an effect when the parent element has display: flex or display: inline-flex.
Main Axis vs Cross Axis
Flexbox is a one-dimensional layout system, which means it arranges items along a single line (the main axis) at a time. The direction perpendicular to it is the cross axis.
- With
flex-direction: row, the main axis is horizontal and the cross axis is vertical. - With
flex-direction: column, the main axis is vertical and the cross axis is horizontal.
This is why justify-content (main axis) suddenly appears to work vertically after you switch to column. The properties did not change. The axes did.
flex-direction Values Explained
| Value | Main axis runs | Item order |
|---|---|---|
row (default) | Left to right (in LTR languages) | First item at the start |
row-reverse | Right to left | First item at the end |
column | Top to bottom | First item at the top |
column-reverse | Bottom to top | First item at the bottom |
flex-direction: row
Items sit side by side in the same order as the HTML. This is the default flexbox layout and the most common choice for navigation bars, toolbars and card rows.
flex-direction: row-reverse
Items still sit side by side, but the order is flipped visually. The first item in HTML appears at the right edge. Start and end are also swapped, so justify-content: flex-start now packs items to the right.
flex-direction: column
Items stack vertically, like normal block elements, but with all the power of flexbox alignment. Use flex-direction column for sidebars, forms, mobile menus and card content where the title, text and button must stack.
flex-direction: column-reverse
Items stack from the bottom upward. A classic use case is a chat window where the newest message stays at the bottom.
Reverse Values and Accessibility
Row-reverse and column-reverse change only the visual order. The DOM order, tab order and screen reader order stay the same. If the visual order and the source order do not match, keyboard users will see focus jump around the page, which can fail WCAG 2.4.3 (Focus Order). Prefer to fix the order in your HTML whenever possible and use reverse values only when the content order truly does not matter for navigation.
flex-direction and Writing Direction
The row direction follows the document's inline direction. In a right-to-left page (dir='rtl'), flex-direction: row starts at the right side automatically. This makes flexbox ideal for multilingual and RTL layouts without extra CSS.
Responsive flex-direction: Column on Mobile, Row on Desktop
The most popular responsive flexbox layout pattern is mobile-first: stack items in a column on small screens, then switch to a row on wider screens.
.cards {
display: flex;
flex-direction: column;
gap: 16px;
}
@media (min-width: 768px) {
.cards {
flex-direction: row;
}
}Common Mistakes with flex-direction
- Forgetting display: flex. flex-direction is ignored on non-flex elements.
- Applying it to the items instead of the container. It is a container property.
- Expecting justify-content to stay horizontal in column mode. It follows the main axis, which becomes vertical.
- Using column without a height. The container height is auto, so there is no free space to distribute vertically.
- Overusing reverse values. They create a mismatch between visual and keyboard order.
Best Practices
- Design mobile-first with column, then upgrade to row using min-width media queries or container queries.
- Combine flex-direction with the gap property instead of margins for clean spacing.
- Use the flex-flow shorthand when you also need wrapping.
- Keep DOM order logical for accessibility and SEO.
FAQ
What is the default value of flex-direction?
The default is row.
What is the difference between flex-direction column and display block?
Block elements stack by default, but a column flex container lets you control alignment, spacing, growth and shrinking of the stacked items with flexbox properties.
Can I change flex-direction with JavaScript?
Yes. Set element.style.flexDirection or toggle a CSS class. Try the live playground below.
Key Takeaways
- flex-direction defines the main axis of a flex container.
- Four values: row, row-reverse, column, column-reverse.
- Changing it swaps what justify-content and align-items control.
- Reverse values change visual order only, not DOM order.
Press Run to execute.
Press Run to execute.
Press Run to execute.
Press Run to execute.
Press Run to execute.
Press Run to execute.
Turn the three links into a vertical menu using flexbox. Make the container a flex container, stack the links in a column, and add a 10px gap between them. Then add a media query so the menu becomes a horizontal row on screens that are 600px wide or more.
Press Run to execute.
Show expected output
Links are stacked vertically with a 10px gap on small screens and displayed in a horizontal row on screens 600px wide or more.This is a self-check — compare your result with the expected output above.
Was this page helpful?