Unit 3 · CSS: the look and the layout
Why display: flex goes on the parent
display: flex goes on the box that holds the items. It turns that box into a flex container, and its direct children line up in a row.
The mix-up
What people often think
“You put display: flex on the things you want in a row.”
What the tutor says
display: flex goes on the parent. It turns that box into a container, and its children line up in a row.
If each card were a flex container itself, what would it arrange?
How it works
Put display: flex on each card instead and every card becomes its own container: the heading and text inside each card sit side by side, while the cards themselves still stack.
The same goes for a nav bar. Put display: flex on .nav, not on each link. A link with display: flex becomes a block of its own, which is often why links suddenly stack.
Side by side
.card { display: flex; }.cards { display: flex; gap: 16px; }Close cousins of this mix-up
The tutor watches for these in the same lesson.
“display: flex goes on each card.”
That puts each card’s heading and text side by side, not the cards. Put display: flex on .cards, the box that holds them.
“The links need display: flex too.”
Each link with display: flex becomes a separate block, which is why they stack. Take it off the links and leave it on .nav.
Practise it with a tutor watching
Flexbox and grid
Lay out a row of cards with flexbox and a whole page with grid.
Free, no account needed.