Flexbox: display: flex on the parent

One declaration opens everything

.container { display: flex; }

The container becomes a "flex container." Its DIRECT children become "flex items" — they flow horizontally (row by default), shrink to fit, and align together as a unit.

Before vs after

<div class="row">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

• Without flex — three vertical divs (block default).
• With `.row { display: flex }` — three divs side-by-side, all the same height (taller children stretch the others to match).

The two axes

A flex container has a main axis (default: horizontal, left→right) and a cross axis (perpendicular, default: vertical).

• justify-content aligns items along the MAIN axis (where they sit horizontally).
• align-items aligns items along the CROSS axis (how they're aligned vertically).

We'll dive deep into both over the next few lessons.

Inline-flex vs flex

display: flex makes the container itself a block element. display: inline-flex makes the container inline (sits in text flow) while still flexing its children. 99% of the time use flex, not inline-flex.