Definition
flex-direction defines the main axis of a flex container. Children (flex items) are placed along this axis. The cross axis is perpendicular to the main axis.
Four values:
row(default): left to right in LTR writing modes; cross axis is top to bottom.row-reverse: right to left; cross axis unchanged.column: top to bottom; cross axis is left to right.column-reverse: bottom to top.
flex-direction interacts with flex-wrap, justify-content (aligns along main axis), and align-items (aligns along cross axis). Reversing direction only affects visual order; DOM order, tab order, and accessibility tree order remain unchanged, which can create keyboard navigation mismatches.
writing-mode affects physical direction: in vertical writing modes row flows top to bottom. Use logical flow properties (block-start, inline-end) when supporting vertical scripts.
When it applies
Use flex-direction: column for card contents, form field groups, or nav items that stack vertically. Use flex-direction: row for toolbars, button groups, and horizontal nav items. Switch direction at breakpoints with media queries rather than using separate layout blocks. Prefer flex-direction: column on the outer shell to avoid horizontal scroll on small viewports.
Avoid row-reverse and column-reverse for content that users need to read or navigate by keyboard; the visual and DOM mismatch breaks assistive technology.
Example
.toolbar { display: flex; flex-direction: row; gap: 8px; align-items: center; }
.sidebar-nav { display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 600px) {
.toolbar { flex-direction: column; }
}Related concepts
- css-flexbox - the full flex model including alignment and wrapping.
- grid-template - grid is the better tool when both axes need control.
- box-model - flex containers suppress margin collapsing on their children.
- css - the CSS deep-dive.
- viewport - responsive flex-direction changes depend on viewport width.
Citing this term
See Flex Direction (llmbestpractices.com/glossary/flex-direction).