Unit 3 · CSS: the look and the layout
flex: 1 vs width: 33% for equal columns
Put flex: 1 on each child. Each one grows to take an equal share of the space left over in the row, so three cards get thirds, four get quarters, and the gap is accounted for.
The mix-up
What people often think
“Equal widths means width: 33%.”
What the tutor says
That breaks once you add a gap or a fourth card. flex: 1 on each card shares whatever space is left, however many there are.
How it works
width: 33% looks right until you add a gap: three thirds plus two gaps is more than 100%, and the last card wraps or squeezes. Add a fourth card and the maths breaks again.
flex: 1 belongs on the children, not the container. It tells each child to grow; the container just needs display: flex.
Side by side
.card { width: 33%; }.cards { display: flex; gap: 16px; }
.card { flex: 1; }Close cousins of this mix-up
The tutor watches for these in the same lesson.
“flex: 1 is a setting for the whole row.”
flex: 1 goes on a child. It tells that child to grow and take an equal share of the spare space.
Practise it with a tutor watching
Flexbox and grid
Lay out a row of cards with flexbox and a whole page with grid.
Free with an account. The first two units need no account.