Space out a row
Set the space between the items in a row, where the row sits them, and how they line up across it.
A menu bar with the logo on the left and the links on the right is one flex row with three properties.
A flex row puts items side by side, but they all bunch at one end. Three more properties on the same box say where the items go, and how much space sits between them.
- Predict: Read the code and say what it will do before you run anything. A wrong guess is fine: it shows you what to look for.
- Run: Run it and compare the result with your prediction.
- Investigate: Trace how each line of code connects to what you see.
- Modify: Change the code on purpose and check the result.
- Make: Build something new using what you have learned. Expect a few tries; that is normal.
Make your prediction first. Help opens once you've locked it in.
Predict
<style>
.bar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
height: 100px;
border: 2px solid navy;
}
</style>
<div class="bar">
<h2>Robotics Club</h2>
<a href="https://example.com/events">Events</a>
<a href="https://example.com/join">Join</a>
</div>
justify-content, align-items and gap are new, and all three go on the box with display: flex. Read the code. Where do the three items sit along the bar?
Run
Compare the bar with your prediction. Then change space-between to center, then to flex-end, and watch the whole group move. Change align-items to flex-start, then flex-end, and watch the items move up and down.
| Code | What it does | Why |
|---|---|---|
display: flex; |
Puts the items in a row | As in the last lesson, it goes on the box that holds the items |
justify-content: space-between; |
Sends the first item to the start, the last to the end, and shares the leftover space between them | justify-content works along the row, in the direction the items run. Other values: flex-start, center, flex-end |
align-items: center; |
Centres each item across the row, halfway down the bar | align-items works across the row, at right angles to it. The bar is 100px tall, so there is room to see it |
gap: 20px; |
Puts at least 20px between neighbouring items | gap is space between items only, not at the ends. justify-content then shares out whatever room is left |
height: 100px; |
Makes the bar taller than its items | Without spare room across the row, align-items has nothing to show |
<style>
.bar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
height: 100px;
border: 2px solid navy;
}
</style>
<div class="bar">
<h2>Robotics Club</h2>
<a href="https://example.com/events">Events</a>
<a href="https://example.com/join">Join</a>
</div>
Investigate
<style>
.bar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
height: 100px;
border: 2px solid navy;
}
</style>
<div class="bar">
<h2>Robotics Club</h2>
<a href="https://example.com/events">Events</a>
<a href="https://example.com/join">Join</a>
</div>
Which line does which job?
Look at the cards.
The items are at the top of the bar.
The row is right this time.
Match each line with what it does to a flex row.
The three items should have 20px between them, but they touch, and there is no error. Click the line that causes it.
Modify
Put 24px between the three menu links.
Need a hint?
Space between items is a job for the row, not for each link.
Another hint
Add gap: 24px; to the .menu rule.
Show the expected result
Move the group of links to the middle of the row.
Need a hint?
Where the group of links sits along the row: justify-content.
Another hint
Add justify-content: center; to the .menu rule.
Show the expected result
The star and the club name sit at the top of the bar. Centre them up and down.
Need a hint?
The star and the name should line up across the bar. Which property works across the row?
Another hint
Add align-items: center; to the .bar rule.
Show the expected result
Put 24px between the menu links.
This ticks when your page has all of the above.
Centre the menu links in their row.
This ticks when your page has all of the above.
Centre the star and the name up and down in the bar.
This ticks when your page has all of the above.
Mix it up
Here is a row of three items with the margin version.
<style>
.strip {
display: flex;
border: 2px solid navy;
}
.item {
margin: 10px;
padding: 10px;
border: 1px solid gray;
}
</style>
<div class="strip">
<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three</div>
</div>
Make
The club's header has a name and a menu, one above the other. Make the header a row with the name at the left and the menu at the right, lined up across the bar.
Need a hint?
There are two items inside the header: the h1 and the nav that holds the links. The row goes on the header.
Another hint
In .bar add display: flex;, then the property that puts the first item at one end and the last at the other.
Another hint
Then align-items: center; so the title and the links line up across the bar.
Show the expected result
Put the club name on the left and the menu on the right of the header.
This ticks when your page has all of the above.
For teachers
Students space a flex row with gap, place its items with justify-content and line them up with align-items, and find out that these go on the row and work in two directions. About 40 minutes.
Open the teacher guide: answers, solutions, slides and a worksheet.
Students will be able to
- I can use gap to put space between the items in a flex row.
- I can use justify-content to place the items along the row.
- I can use align-items to line the items up across the row.
Before class
Do the Make task yourself in the playground (about 4 minutes).
A flex row is a box with display: flex: its children (the items) sit side by side. justify-content works along the row, the way the items run. align-items works across it, at right angles, so with a row it means up and down. The common slip is to swap them. All three properties go on the box that holds the items, never on the items.
Running the lesson
- Predict and Run: some students think `justify-content` aligns the words inside each item. Change it to `center` and `flex-end` and watch the whole group slide, with the words unchanged.
- Investigate: the 'up and down' question is the one students get wrong. Ask: which direction does the row run? Then which direction is across it?
- Mix it up: margin sits outside every item, gap only between them. Let students draw the bar on paper and mark the gaps.
- Modify and Make: all three tasks are one line added to the row's rule. If a student writes a rule for the links, ask which box holds them.
The hard part (on purpose)
Telling along from across. Ask which way the row runs, and which property works in that direction, before telling them.
When students get stuck
- The items do not move when justify-content is added. Ask: Does the same rule also have display flex? Fix: justify-content and align-items only work on a box that has display flex. Add display flex to the same rule.
- align-items: center changes nothing. Ask: Is the row taller than its items? Fix: align-items needs spare room across the row. Give the bar a height, or put the items in a box with more content.
- The menu links move apart but the club name does not. Ask: Which box did you put display flex on? Fix: Put it on the header that holds both the name and the menu. The menu links are inside nav, so they are not items of the header.
Stretch and support
Stretch: Put the menu in a second flex row of its own, inside the nav, and give it a gap. Then try space-around and space-evenly beside space-between.
Support: Give students the Run page and ask them only to change the word after justify-content, five times, and say what each did.
Where it leads
Next lesson makes a row wrap when it runs out of room, so it fits a phone as well as a laptop. Class idea: look at the menu bars of three websites and decide which values of justify-content and align-items they use.
What each step is for
- Predict: Students expect justify-content to change the text inside the items; it places the items themselves along the row.
- Run: justify-content places the items along the row, align-items across it, and gap is the least space between neighbours.
- Investigate: justify-content and align-items are two different directions, and both go on the row, not on the items.
- Modify: Spacing a menu with gap, centring it with justify-content, and lining up a logo with align-items: each on the row's rule.
- Mix it up: Margin is space outside an item's border, gap is space between items in the row: using the box model and a flex row together shows the difference.
- Use gap to put space between the items in a flex row.
- Use justify-content to place the items along the row.
- Use align-items to line the items up across the row.