CSS flex-direction Property
The flex-direction property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).
Description & Usage
The flex-direction property establishes the main axis of a flex container, dictating whether flex items are laid out horizontally in rows or vertically in columns.
By switching between row and column, developers can easily create responsive designs that transform horizontal navigation bars on desktop into stacked vertical menus on mobile devices with minimal code changes.
Using row-reverse or column-reverse flips the visual order and start/end points of flex items, allowing right-to-left layout adjustments or inverted stacking order.
Property Specifications
| Property Feature | Specification |
|---|---|
| Category | Flexbox |
| Initial Value | row |
| Inherited | No (not inherited) |
| Applies To | Flex containers (display: flex or inline-flex) |
Syntax
flex-direction: row | row-reverse | column | column-reverse;Property Values
| Value | Description |
|---|---|
| row | Items are laid out horizontally in line direction (left to right in LTR). |
| row-reverse | Items are laid out horizontally in reverse direction (right to left). |
| column | Items are stacked vertically from top to bottom. |
| column-reverse | Items are stacked vertically from bottom to top. |
Code Examples
Vertical Column Navigation
.nav-menu {
display: flex;
flex-direction: column;
gap: 1rem;
}
Stacks menu links vertically in a sidebar.