10 Multimedia · 2026
Week 5 · Lesson 10

Introduction to Flexbox

Week 5 · 75 minutes · Year 10 Industrial Technology — Multimedia

IND5-2IND5-3IND5-9

Learning intentions

  • I can create a flex container with display: flex.
  • I can distribute flex items with justify-content.
  • I can align flex items with align-items.

Success criteria

  • I have built a horizontal navigation using flexbox.
  • I have built a 3-card row using flexbox.
  • I can explain the difference between main axis and cross axis in plain English.

Do Now · 5 min

Look at 3 webpage layouts (your school site, a news site, a shopping site). How many times do you see rows of things next to each other? Menu links in a row. Product cards in a row. Icons in a row.

Before flexbox (2015), putting two things side-by-side in CSS was hard. Now it's two lines.

I Do · ~10 min Teacher demonstration

Teacher shows the problem first — 3 divs stack vertically by default:

<div class="row">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

Then adds the magic line:

.row {
  display: flex;          /* turns the parent into a flex container */
  gap: 20px;              /* space between items */
  justify-content: center; /* along the MAIN (horizontal) axis */
  align-items: center;    /* along the CROSS (vertical) axis */
}
Two axes:
  • Main axis — horizontal by default. Controlled by justify-content.
  • Cross axis — vertical by default. Controlled by align-items.

Teacher demos the values: flex-start, center, flex-end, space-between, space-around, space-evenly.

We Do · ~15 min Guided build

Together, build a horizontal nav with flexbox:

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Projects</a>
  <a href="#">Contact</a>
</nav>
nav {
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  padding: 1rem;
  background: #1f3a68;
}
nav a {
  color: white;
  text-decoration: none;
}

You Do · ~35 min Independent practice

Build two things:

  1. A horizontal navigation with 4 links using flexbox. Try different justify-content values.
  2. A 3-card row where each card has a title, short description, and a fake "Learn More" link. Use flexbox. Cards should be equal width.

Add both to your growing portfolio pages.

Bonus game: play Flexbox Froggy — 24 levels, takes 20 min, makes flexbox stick.

Differentiation

Support

Template HTML/CSS with comments showing where to add flex properties. Student fills in values only.

Core

Complete both builds independently.

Extension

Build a responsive 3-column layout that wraps to 1 column on narrow screens using flex-wrap: wrap.

Exit Ticket · 5 min

Exit ticket

1. Which property turns a container into flex? ___________

2. Which property aligns items along the main (horizontal) axis? ___________

3. Best flexbox trick you learned today in one sentence:

____________________________________________________

Resources for this lesson

📚 Deeper Reading

External references drawn from Shay Howe's "Learn to Code HTML & CSS" and University of Michigan's "Web Design for Everybody" Coursera specialization. All credit to original authors.