Once Flexbox is switched on for a container, its children line up in a row by default, left to right. Nothing forces that behavior: flex-direction fully decides which way items follow one another, and that choice affects every other alignment property on the container.
It comes up whenever a layout needs to switch from a horizontal arrangement to a vertical one, for example a toolbar that turns into a column of buttons on mobile, or a side panel that stacks its items instead of lining them up side by side.
Definition
flex-direction is the property that sets the orientation of a flex container's main axis, meaning the direction its direct children spread out in. It accepts four values, each one orienting the main axis differently.
.container {
display: flex;
flex-direction: row;
}row is the default value: items line up horizontally, in the order they appear in the HTML, left to right on a page written in French or English.
The four values
| Value | Direction of the main axis | Visual order |
|---|---|---|
row | Horizontal | Same as the HTML order |
row-reverse | Horizontal, reversed | Last HTML item shown first |
column | Vertical | Same as the HTML order |
column-reverse | Vertical, reversed | Last HTML item shown first |
Switching from row to column is not just about stacking items on top of one another: it rotates the entire main axis by ninety degrees, and the cross axis along with it.
What the rotation actually changes
This is the easiest part to underestimate: justify-content and align-items keep being written exactly the same way, but their visual direction changes with flex-direction. In row, justify-content acts horizontally. In column, that same property acts vertically, without a single line of code changing in the declaration.
.column {
display: flex;
flex-direction: column;
justify-content: center;
}In that example, justify-content: center centers the items vertically, not horizontally, precisely because flex-direction rotated the main axis toward vertical.
A common use case: responsive layouts
flex-direction is one of the properties most often changed inside a media query, to turn a horizontal layout into a vertical one on a small screen.
.bar {
display: flex;
flex-direction: row;
}
@media (max-width: 600px) {
.bar {
flex-direction: column;
}
}On a narrow screen, the same HTML elements, in the same order, stack vertically instead of squeezing onto one line. Nothing in the markup needs to be moved or duplicated: only the axis direction changes.
The pitfall with the reverse values
row-reverse and column-reverse flip the visual order of items, but only on screen: the HTML itself keeps its original order.
row-reverse or column-reverse does not change the reading order for keyboard navigation or screen readers. A user tabbing through the page still moves through items in HTML order, which can feel inconsistent with what they see on screen if the content has a meaningful reading sequence.Frequently asked questions
flex-direction: column-reverse useful for a chat feed?Yes, that is one of its most common uses: showing the newest messages at the bottom without reordering the data on the server. The HTML keeps its natural chronological order, and column-reverse takes care of visually placing the latest message in the last position, just like a typical messaging app.
flex-direction be animated?Technically yes with a transition, but the result is rarely convincing: going from row to column does not lend itself to smooth interpolation, items often jump position instead of sliding. It is far more common to handle that switch directly through a media query, with no transition at all, or to reach for a finer animation built with transforms instead.
flex-direction work without flex-wrap?Yes, they are two independent properties. flex-direction only picks the direction of the main axis, while flex-wrap decides whether items are allowed to spread across several lines or columns. A container can very well use flex-direction: column and never need to wrap at all, as long as its content fits inside the available height.