The flex mental model: main and cross axis

One line of CSS, a new layout world

Block elements stack vertically (lesson 5-2), so putting things side by side used to be painful. Flexbox fixes that:

.toolbar {
  display: flex;
}

The element with display: flex becomes a flex container, and its direct children become flex items that line up in a row. Two roles, two sets of properties:

• Container properties decide how the group flows: flex-direction, justify-content, align-items, gap.
• Item properties decide how one child behaves: flex-grow and friends.

Almost everything about flexbox follows from one idea, shown in the next figure: the main axis.

Main axis and cross axis

• The main axis is the direction items flow: horizontal for flex-direction: row (the default), vertical for flex-direction: column.
• The cross axis is the perpendicular one.

Every alignment property picks an axis:

• justify-content positions items along the main axis.
• align-items positions them along the cross axis.

Switch flex-direction to column and the axes swap, so justify-content suddenly moves things vertically. That is the whole trick: never memorize horizontal or vertical, always ask which axis.