A row with Flexbox

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 put a box's children in a row with display flex on the parent.
• I can say which box is the parent and which are its children.
• I can explain why display flex on the items does nothing.

Timing

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

Before class

Read the unit primer "Layout and components in 5 minutes", then do the Make task yourself.

The one idea of the lesson: display: flex; goes on the parent (the box that holds the items), and its children line up in a row. Only the direct children line up. Spacing, centring and wrapping are the next lessons, so here the space between items is a margin on each item. list-style: none; is not Flexbox: it removes a list's bullets, which every real menu does.

Running the lesson

1. Predict: most students do not expect one line on the ul to rearrange its items. It does, because the items are its children. Ask one pair from each answer to say why. Listen for who says bullets: list-style is not Flexbox.
2. Run: delete and restore display: flex; to see the switch.
3. Investigate: ask which box is the parent before every rule. The menu that will not line up has display: flex on each li: each item lines up its own insides, so nothing visible changes and there is no error.
4. Mix it up: both rules are from earlier lessons. Ask which links nav a picks, and where padding goes.
5. Modify: menu first, then the cards (a new rule on the div that holds them), then the tidy-up.
6. Make: several answers are fine. The check wants the nav parts and display: flex.

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.

• Parent or child? (end, 4 min)

  Swap menus with a partner. Point at the box that holds the items and the boxes that line up, then say which rule has display flex.

  Listen for students who point at the links. Ask what the links sit inside.

The hard part (on purpose)

display: flex goes on the parent, not the items. When the row doesn't appear, ask which box holds the items before saying anything else.

When students get stuck

Answers to the checks

1. Predict: How will the three menu items be placed?
   Side by side in a row. display: flex on the ul lines up its children, the li items. (list-style: none removes the bullets, as on real menus, and the margin on each li keeps the words apart.)
2. Which box?: To put the three cards in a row, which rule gets display: flex?
   .cards, the div that holds the cards
   display: flex goes on the box that holds the items: .cards. Its children, the three .card boxes, line up in a row. A card can hold a picture and text and still be one item in the row.
3. The menu that will not line up: This menu should be a row, but the items still stack, and there is no error. Click the line that picks the wrong box.
   line 2
   Line 2 puts display: flex on each li, so each item lines up its own insides. It belongs on the ul that holds them: ul { display: flex; }.
4. Which boxes line up?: The ul has display: flex. Each li holds an a link. Which boxes are lined up in the row?
   The li items, the children of the ul
   Flexbox lines up the children of the box it is on. The li items are the ul's children, so they form the row, and each link stays inside its li.
5. Mix it up: The menu links should lose their underline without changing the link in the story, and the header should have room between its edge and its words. Which two rules do both jobs?
   nav a { text-decoration: none; } and header { padding: 16px; }
   nav a picks only the links inside the nav. Padding is the room inside the header's edge, around its words, and margin would put the space outside it.

Solutions

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

Modify › A menu in a row

<style>
  .menu {
    display: flex;
    list-style: none;
  }
  .menu li {
    margin-right: 24px;
  }
  .card {
    padding: 8px;
    border: 2px solid teal;
    margin: 6px;
  }
</style>
<ul class="menu">
  <li><a href="https://example.com/home">Home</a></li>
  <li><a href="https://example.com/events">Events</a></li>
  <li><a href="https://example.com/join">Join</a></li>
</ul>
<div class="cards">
  <div class="card">
    <img src="trophy.svg" alt="Trophy" width="50">
    <p>Owls</p>
  </div>
  <div class="card">
    <img src="medal.svg" alt="Medal" width="50">
    <p>Hawks</p>
  </div>
  <div class="card">
    <img src="star.svg" alt="Star" width="50">
    <p>Kestrels</p>
  </div>
</div>

Modify › Cards in a row

<style>
  .menu {
    display: flex;
    list-style: none;
  }
  .menu li {
    margin-right: 24px;
  }
  .cards {
    display: flex;
  }
  .card {
    padding: 8px;
    border: 2px solid teal;
    margin: 6px;
  }
</style>
<ul class="menu">
  <li><a href="https://example.com/home">Home</a></li>
  <li><a href="https://example.com/events">Events</a></li>
  <li><a href="https://example.com/join">Join</a></li>
</ul>
<div class="cards">
  <div class="card">
    <img src="trophy.svg" alt="Trophy" width="50">
    <p>Owls</p>
  </div>
  <div class="card">
    <img src="medal.svg" alt="Medal" width="50">
    <p>Hawks</p>
  </div>
  <div class="card">
    <img src="star.svg" alt="Star" width="50">
    <p>Kestrels</p>
  </div>
</div>

Modify › Tidy the list

<style>
  .menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .menu li {
    margin-right: 24px;
  }
  .cards {
    display: flex;
  }
  .card {
    padding: 8px;
    border: 2px solid teal;
    margin: 6px;
  }
</style>
<ul class="menu">
  <li><a href="https://example.com/home">Home</a></li>
  <li><a href="https://example.com/events">Events</a></li>
  <li><a href="https://example.com/join">Join</a></li>
</ul>
<div class="cards">
  <div class="card">
    <img src="trophy.svg" alt="Trophy" width="50">
    <p>Owls</p>
  </div>
  <div class="card">
    <img src="medal.svg" alt="Medal" width="50">
    <p>Hawks</p>
  </div>
  <div class="card">
    <img src="star.svg" alt="Star" width="50">
    <p>Kestrels</p>
  </div>
</div>

Make

<style>
  header {
    background-color: lightblue;
    padding: 12px;
  }
  .menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .menu li {
    margin-right: 24px;
  }
</style>
<header>
  <h1>Robotics Club</h1>
  <nav>
    <ul class="menu">
      <li><a href="https://example.com/home">Home</a></li>
      <li><a href="https://example.com/events">Events</a></li>
      <li><a href="https://example.com/join">Join</a></li>
    </ul>
  </nav>
</header>
<h2>We meet every Tuesday at lunch.</h2>

Stretch and support

Stretch: Make the cards a row too, with a picture in each, and predict what happens if a card has display flex as well.

Support: Give students the Modify starter and do the first task together, saying out loud: the menu is the parent, so display flex goes in .menu.

Exit ticket

A student wants three cards side by side. They write .card { display: flex; } but the cards still stack. What is wrong, and what should they write?

display flex is on the items. It goes on the box that holds the cards, for example .cards { display: flex; } with the cards inside a div with class cards.

What each step is for

• Predict: Students rarely guess that one property on the list rearranges all its items; seeing the row appear makes the parent-child idea concrete.
• Run: display: flex goes on the box that holds the items; its children line up in a row.
• Investigate: Flexbox goes on the parent, the box that holds the items, and only its children line up.
• Modify: Building a menu row and a row of cards, always putting display: flex on the parent.
• Mix it up: A selector with a space picks the links inside the menu, and padding gives the header room inside its edge.

Where it leads

Next lesson spaces the row out: gap, justify-content and align-items, so the club name sits left and the menu right. Class idea: find three websites and sketch which parts are Flexbox rows (menus, toolbars, rows of cards).