`flex-direction` chooses which way a flex container’s items run. Think of it as picking the direction for a line of boxes before you decide how to space or align them. Flexbox does not make you march only across the page or only down it—you choose the main axis. section 12.2
Set `display: flex` on the container, then choose one of four directions:
- `row` runs items horizontally from left to right. It is the default, so writing `flex-direction: row` is optional. section 12.2
- `row-reverse` runs items horizontally from right to left. section 12.2
- `column` runs items vertically from top to bottom. section 12.2
- `column-reverse` runs items vertically in reverse order. section 12.2
container {
display: flex;
flex-direction: row|row-reverse|column|column-reverse;
}
The property belongs on the flex container, not on each child item. Swap in a value to change the container’s main-axis direction. section 12.2
Stack a thumbnail and its caption
To put a caption below a photo, make the thumbnail wrapper a flex container and use `flex-direction: column`. Its image and caption then follow a vertical main axis. The same trick can make an overlaid caption flow downward before `justify-content: flex-end` places that content at the bottom. section 15.8 section 15.8
Direction changes more than the order of items: it defines the main axis. `justify-content` arranges items along that axis, while `align-items` works across it on the cross axis. Pick the direction first; the other Flexbox choices make much more sense afterward. section 12.2 section 12.7
