Flexbox lets a container choose which way its items travel. The flex-direction property makes that choice: across like a row of seats, or down like a stack of cards. That chosen route is called the main axis; the perpendicular route is the cross axis. section 12.2
Set flex-direction on a flex container to choose its main axis:
- row places items horizontally from left to right. It is the default, so writing flex-direction: row is optional. section 12.2
- row-reverse keeps a horizontal main axis but runs items from right to left. section 12.2
- column places items vertically from top to bottom; the cross axis then runs left to right. section 12.2
- column-reverse uses a vertical main axis from bottom to top and reverses the item order. section 12.2
container {
display: flex;
flex-direction: row|row-reverse|column|column-reverse;
}
This rule shows the four available values. First make the element a flex container with display: flex, then pick the direction that fits the layout. section 12.2
Direction matters because other flexbox properties work along one axis or the other. After flex-direction picks the main axis, justify-content arranges items along that main axis, while align-items works across it on the cross axis. section 12.18 section 12.2
Center a portfolio layout, then stack its content
A page can use two containers with different directions. Set the body to row and use justify-content: center to center its content horizontally. Inside it, set a nested div to column with justify-content: flex-start to create a top-aligned vertical content stack. One direction handles the overall page; the other handles the content inside it. section 20.10
Try changing only the value from row to row-reverse, column, and column-reverse. Watch for two changes: whether the items run across or down, and which end receives the first item. Once that feels natural, properties such as justify-content and align-items become easier to aim. section 12.2 section 12.18
