Flex Direction
Arrange flex items in rows or columns.
Syntax
flex-direction: row | column;The flex-direction property sets the main axis:
row— left to right (default).row-reverse— right to left.column— top to bottom.column-reverse— bottom to top.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer uses flex-direction: column on a sidebar so its nav items stack vertically rather than flowing in a row.
- A designer uses flex-direction: row-reverse to place an icon after its label text without changing the HTML source order.
- A developer switches flex-direction from row to column inside a media query so a horizontal feature list stacks on mobile screens.
More examples
Column direction sidebar
Sets flex-direction: column so sidebar items stack vertically — the default block-like flow in a flex container.
.sidebar {
display: flex;
flex-direction: column;
gap: 8px;
width: 220px;
padding: 16px;
}Row-reverse for icon placement
Uses row-reverse to display the icon after the text in the HTML but rendered visually before it.
.alert {
display: flex;
flex-direction: row-reverse;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: #eef3ff;
}Responsive direction switch
Stacks feature items vertically on mobile then switches to a horizontal row on tablet/desktop via a media query.
.features {
display: flex;
flex-direction: column;
gap: 24px;
}
@media (min-width: 768px) {
.features {
flex-direction: row;
}
}
Discussion