Space out a row

Classroom resources

Load these into Waypoints Prepare: choose Load URL and paste the copied address, or download the file and import it. In Prepare, the worksheet's Teacher edition shows the answers; the student copy hides them.

• Slides Download Copy address for Prepare Present from the browser, or export to PowerPoint or PDF.
• Worksheet Download Copy address for Prepare Print the student copy; the Teacher edition has the answers.

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.

Timing

Predict and Run 10 min · Investigate 10 min · Mix it up 4 min · Modify 8 min · Make 8 min

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

1. 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.
2. 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?
3. Mix it up: margin sits outside every item, gap only between them. Let students draw the bar on paper and mark the gaps.
4. 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.

In class

On the slides at these points. Students can do the whole lesson on their own; these are for the room. In the deck, the Run, Modify and Make slides have the live playground in them (the tutorial link is the backup), and the notes above are in each slide's speaker notes.

• Where do they go? (predict, 3 min)

  With your partner, point to where Events will sit in the bar. Then each choose one of the four options and hold up fingers.

  Take a vote before running. Ask a student who chose the last option what they think justify-content does to words. The idea to land: it places the items.

• Be the row (end, 5 min)

  Three students stand in a line as a flex row. The class calls out justify-content values and the line moves along the row. Then call out align-items values and they step forward and back.

  Listen for pupils who mix up the two directions. Ask which way the row runs.

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

Answers to the checks

1. Predict: Where do the three items sit along the bar?
   Robotics Club at the left end, Join at the right end, and Events between them. justify-content places the items along the row. It does not change the text inside an item. align-items: center also puts them halfway down the 100px bar.
2. Match the lines: Match each line with what it does to a flex row.
   justify-content: space-between → B. first item at the start, last at the end, the rest spread between; justify-content: flex-end → C. all items packed at the end of the row; align-items: center → D. items centred across the row, halfway down; gap: 20px → A. the least space between neighbouring items
   Two properties set where the items sit: justify-content along the row and align-items across it. gap sets the space between neighbours.
3. What gets centred: Each card holds a word. What does justify-content: center centre?
   The three cards, as a group, along the row
   justify-content places the items, here the cards, along the row. It does not touch the words inside a card. The words move only if the card itself has room around them.
4. Up and down: The star and the club name sit at the top of the 100px bar. Which line centres them up and down?
   align-items: center;
   The row runs left to right, so up and down is across it: align-items. justify-content would slide both items to the middle of the row, but leave them at the top.
5. The gap that does nothing: The three items should have 20px between them, but they touch, and there is no error. Click the line that causes it.
   line 6
   Line 6 puts gap on each item. gap spaces the items inside a box, so it goes on the row that holds them: .strip { gap: 20px; }.
6. Mix it up: The row gives each item margin: 10px. Another row gives its items no margin and uses gap: 10px. How do they differ?
   The margin row also has 10px between the first item and the row's border; the gap row has none there
   Margin is outside each item's border on every side, so it leaves space at the ends of the row as well. gap sits only between neighbouring items. Between two items, margin on both gives 20px.

Solutions

One possible solution for each task. Other correct programs are fine.

Modify › Space the links

<style>
  .menu {
    display: flex;
    gap: 24px;
  }
  .bar {
    display: flex;
    height: 100px;
    border: 2px solid navy;
  }
</style>
<nav class="menu">
  <a href="https://example.com/events">Events</a>
  <a href="https://example.com/robots">Robots</a>
  <a href="https://example.com/join">Join</a>
</nav>
<div class="bar">
  <img src="star.svg" alt="Club star" width="50">
  <h2>Robotics Club</h2>
</div>

Modify › Centre the menu

<style>
  .menu {
    display: flex;
    gap: 24px;
    justify-content: center;
  }
  .bar {
    display: flex;
    height: 100px;
    border: 2px solid navy;
  }
</style>
<nav class="menu">
  <a href="https://example.com/events">Events</a>
  <a href="https://example.com/robots">Robots</a>
  <a href="https://example.com/join">Join</a>
</nav>
<div class="bar">
  <img src="star.svg" alt="Club star" width="50">
  <h2>Robotics Club</h2>
</div>

Modify › Line up the logo

<style>
  .menu {
    display: flex;
    gap: 24px;
    justify-content: center;
  }
  .bar {
    display: flex;
    align-items: center;
    height: 100px;
    border: 2px solid navy;
  }
</style>
<nav class="menu">
  <a href="https://example.com/events">Events</a>
  <a href="https://example.com/robots">Robots</a>
  <a href="https://example.com/join">Join</a>
</nav>
<div class="bar">
  <img src="star.svg" alt="Club star" width="50">
  <h2>Robotics Club</h2>
</div>

Make

<style>
  .bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: lightblue;
    padding: 10px;
  }
</style>
<header class="bar">
  <h1>Robotics Club</h1>
  <nav>
    <a href="https://example.com/events">Events</a>
    <a href="https://example.com/robots">Robots</a>
    <a href="https://example.com/join">Join</a>
  </nav>
</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.

Exit ticket

A flex row has justify-content: center. Which way do the items move, and what happens to the words inside each item?

The group of items moves to the middle of the row. The words stay where they are inside their item.

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.

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.