Flexbox: a row of cards
Three cards, stacked one under another, each stretching the full width of the
page. Nobody asked for that. It happens because a <div> is a block element,
and block means "take the whole line, push the next thing below me". Three
divs, three lines.
You want them side by side. The instinct is to do something to each card - and
that instinct is exactly what makes flexbox feel strange at first, because the
fix is not on the cards at all. It is on their parent.
Give the container display: flex and it stops stacking its children and lays
them out along a row instead. The cards themselves did not change. Their
container changed, so the rules for arranging them changed. That is the whole
shift: layout is a property of the parent, and the children just live inside
it.
A flex container also understands gap, which puts space between the
children and nowhere else - no space before the first card, none after the
last, nothing to subtract back off later.
Your task: the three cards are stacked. Make them sit side by side in a
row, with 16px of space between them. Style the container, .cards - not
.card.
You'll practice:
- Turning a parent into a flex container so its children lay out in a row
- Spacing children with
gap instead of a margin on each one
Related reading: Flexbox: One-Dimensional Layout →