The flex mental model: main and cross axis

From lesson 5-1, the box-model layer that pushes neighbors away is the margin.

Margin is the space outside the border, between boxes, and until now it has been the only layout tool available. This unit introduces a real one.

One line of CSS, a new layout world

Block elements stack vertically, as lesson 5-2 covered, so putting things side by side used to be painful. Flexbox fixes that in one declaration.

.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.

Keeping those two sets apart prevents most flexbox confusion, since a property written on the wrong side of the relationship simply does nothing.

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

Main axis and cross axis

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

Every alignment property picks an axis rather than a direction.

Switching flex-direction to column swaps the axes, so justify-content suddenly moves things vertically.

Never memorize horizontal or vertical. Always ask which axis.

Centering in a column

In a container with flex-direction: column, the property that moves items toward the vertical center is justify-content.

In a column the main axis is vertical, and justify-content always works along the main axis.

align-items would now control horizontal placement, which is the swap that makes people reach for the wrong property. Reading the direction first, then the axis, gets it right every time.

Three cards in a row instead of stacked

A div is a block element, so by default each card takes a full line. One declaration on the container changes that.

CSS

.row {
  display: flex;
  gap: 16px;
  border: 2px dashed gray;
  padding: 12px;
}

.card {
  padding: 16px 24px;
  background: #d4af37;
  border-radius: 8px;
  font-family: sans-serif;
}

display: flex belongs on the container, .row, and never on the cards. gap adds space between items without touching the edges, which is what the container's own padding is for.

The dashed border is there only to make the container visible, and removing it changes nothing about the layout.