HTML & CSS · 14-day planAll days
Lay things out in a row or a column with Flexbox. Learn the flex container and its items, the main and cross axes, justify-content and align-items, gap and wrapping, and how items grow and shrink, then build a navigation bar, a row of cards and the famous perfectly centred box.
By the end of today you can
- Turn a container into a flexbox and explain its main and cross axes
- Arrange items with flex-direction, justify-content and align-items
- Space items with gap and let them wrap onto new lines
- Control growing and shrinking with flex-grow, flex-shrink and flex-basis
- Build a navbar, a card row and a centred box
For years, putting things side by side in CSS was surprisingly hard. Flexbox fixed that. It arranges a container's children in a row or column, spaces them out and lines them up, in just a few lines.
Your first flexbox
Put display: flex on the container and its direct children (the items) line up in a row. gap adds space between them. Try removing display: flex to see the difference.
Two axes
| Property (on the container) | Controls | Common values |
|---|---|---|
flex-direction | Which way the main axis runs | row, column |
justify-content | Position along the main axis | flex-start, center, flex-end, space-between, space-around |
align-items | Position along the cross axis | stretch (default), flex-start, center, flex-end |
gap | Space between items | 1rem |
flex-wrap | Allow new lines | wrap |
Edit the values in the code and watch. With flex-direction: column the axes swap: justify-content becomes vertical.
The perfectly centred box
Three lines of CSS. This used to be a famous web-developer headache.
Growing and shrinking
flex: 1: grow to share the free space equally.flex: 2: take twice as big a share.flex: 0 0 120px: don't grow, don't shrink, start at 120px (grow, shrink, basis).
Wrapping
With flex-wrap: wrap, items move onto a new line when there's no room, so the same CSS works on a phone and a big screen.
A navigation bar
margin-right: auto on the logo soaks up the free space, pushing the links to the right: a handy Flexbox trick.
Single-item tweaks
Items can override the container: align-self: flex-end moves one item, and order: -1 moves one to the front visually (keep the HTML order sensible for screen readers and keyboard users, though).
Recap
display: flexon the container lays out its children in a row (or a column).justify-content: main axis.align-items: cross axis.gap: spacing.flex: 1shares space;flex: 0 0 120pxfixes a size;flex-wrap: wrapallows new lines.- Centring:
justify-content: center; align-items: center;. - Navbar trick:
margin-right: autoon the first item.
Flexbox works in one direction at a time. Tomorrow: Grid, for rows and columns together.
Knowledge check
Test what you learned
5 questions · pick an answer to see if you're right
- 1
Where do you write display: flex?
- 2
With the default flex-direction: row, what does justify-content control?
- 3
How do you centre one box both horizontally and vertically inside a container?
- 4
What does flex: 1 on every item do?
- 5
Cards in a flex row get squashed on a phone. What fixes it?
Finished day 10?
Mark complete and continue to Day 11: GridWas this lesson helpful?
Need a breather? Take a two-minute break