flexbox
flex-direction
Sets the main axis of a flex container, deciding whether items lay out horizontally or vertically. It also determines which direction items are reversed if needed.
flex-direction: row | row-reverse | column | column-reverseCommon values
| Value | Effect |
|---|---|
| row | Default; items flow horizontally in writing direction |
| row-reverse | Items flow horizontally in reverse |
| column | Items stack vertically top to bottom |
| column-reverse | Items stack vertically bottom to top |
Examples
.nav { display: flex; flex-direction: row; }Horizontal navigation bar
.stack { display: flex; flex-direction: column; gap: 1rem; }Vertical stack of elements with spacing
.footer { display: flex; flex-direction: row-reverse; }Items appear right-to-left
Gotcha
Switching to column swaps the meaning of justify-content and align-items because the main axis rotates.
Related properties
flex
Shorthand for flex-grow, flex-shrink, and flex-basis on a flex item. Controls how the item grows or shrinks to fill the flex container.
justify-content
Aligns flex or grid items along the main axis, distributing extra space between them. It has no effect if the items already fill the container.
align-items
Aligns flex or grid items along the cross axis of their container. It is the counterpart to justify-content and controls vertical alignment in a default row layout.
gap
Shorthand for row-gap and column-gap, setting spacing between flex, grid, or multi-column items. Replaces margin hacks for evenly spacing children.