The main axis is the direction a flex container uses to line up its flex items. Think of it as the container’s travel direction: items can travel across in a row or down in a column. Every flex container also has a cross axis, which runs perpendicular to the main axis. section 12.2
Set the main-axis direction with flex-direction. The default value, row, makes the main axis horizontal and places items from left to right. Column makes it vertical instead. The reverse values keep the same horizontal or vertical route but reverse the item order along it. section 12.2
container {
display: flex;
flex-direction: row|row-reverse|column|column-reverse;
}
Use flex-direction to choose whether the main axis runs across the container or down it. section 12.2
The four direction choices are:
- row: a horizontal main axis, with items running left to right by default. section 12.2
- row-reverse: a horizontal main axis with the item direction reversed. section 12.2
- column: a vertical main axis, with items running from top to bottom. section 12.2
- column-reverse: a vertical main axis with the item direction reversed. section 12.2
The main axis matters because several Flexbox properties work relative to it. justify-content arranges items along the main axis, while align-items works on the cross axis. So “start” is not permanently left or top; it depends on the direction you chose. section 12.2 section 12.6
Stack a page, then line up its parts
A page body can use a vertical main axis to stack its major sections. Inside it, a header, navigation list, or content area can use a horizontal main axis to put a logo beside a title, navigation links side by side, or an article beside an aside. Nesting these containers handles light-duty two-dimensional layouts; CSS Grid is identified as a better fit for most two-dimensional web-page layouts. section 12.6
