Lesson 7 · about 15 minutes

🚂 Flexbox: Lining Up Your Boxes

Right now your boxes stack on top of each other like pancakes. Today you learn the magic spell that lines them up side by side — and your page suddenly looks like a REAL website.

🎬 Watch first (90 seconds)

The pancake problem

In lesson 6 you learned that every element is a box. But have you noticed something? The browser stacks your boxes top to bottom, like a pile of pancakes. 🥞 One card, then the next card under it, then the next one under that.

Real landing pages don't look like that. They have cards sitting next to each other in a neat row. How? With one line of CSS paint called flexbox.

💡 The one idea of this lesson Think of a train. 🚂 You don't tell each train car where to go — you put them on a track, and the track lines them up. In CSS, the parent box is the track. Write this on the PARENT:

.row {
  display: flex;
}

…and all its children (the train cars) snap into a row, side by side. The rule goes on the track, never on the cars!

Once the track exists, you get three bonus controls — all written on the parent too:

gap: 16px; → space between the train cars, so they don't squish together.
justify-content: center; → where the whole train sits on the track. center parks it in the middle, space-between spreads the cars from end to end, flex-end pushes them to the right.
align-items: center; → lines the cars up top-to-bottom, so a short car and a tall car sit level with each other.

🕵️ Secret decoder tip for reading AI code When you see display: flex on a box, it is NOT about how that box looks. It's about where its KIDS go. Parent = track, children = cars. Remember that and half of all CSS layouts stop being mysterious.

🛠️ Build it (the fun part)

🧪 Your mission Give your product page a real feature row: three cards, side by side, like every landing page on the internet.

Open practice/myshop.html in VS Code.

Make THREE feature cards — divs with class="card", just like lesson 6. Each one gets a tiny headline and a sentence about one cool thing your product does:

<div class="card">
  <h3>Super Fast</h3>
  <p>Ties your shoes in 2 seconds flat.</p>
</div>
<div class="card">
  <h3>Waterproof</h3>
  <p>Works in rain, puddles, even the bath.</p>
</div>
<div class="card">
  <h3>Glow Mode</h3>
  <p>Lights up when it gets dark outside.</p>
</div>

Now build the track: wrap ALL three cards in one parent div:
```
<div class="row">
  ... your three cards go here ...
</div>
```

In your <style> section, add the flexbox spell to the parent:

.row {
  display: flex;
  gap: 16px;
  justify-content: center;
}

Save (⌘S) and refresh the browser (⌘R). BOOM — three cards in a row, centered. Your page just went from "school project" to "real landing page". 🎉

🕹️ Try it right here — the lesson checks your code!

Type in the dark box, watch the preview update live, then press Check my code ✔ to see if you nailed the task.

🔨 Now break it!

Back in myshop.html — mess with your .row and watch the train move. Predict what will happen BEFORE you refresh!

Change justify-content: center to space-between. Save, refresh. Where did the cars go? Now try flex-end.
Delete the gap: 16px; line. Save, refresh. Yuck, right? Put it back. Try gap: 50px; too.
Add a FOURTH card inside the row. Did you need to change any CSS for it to join the train?
Grab the edge of your browser window and drag it narrower. Watch the cards squish! Flexbox squeezes the cars to fit the track.

⚠️ If your cards refuse to line up Check WHERE you wrote display: flex. It must be on the parent (.row), not on the cards. Putting it on the cards is the number one flexbox mistake on Earth — even grown-up coders do it.

🎮 Quiz time

No peeking at the notes above — trying to remember is what makes it stick!

📚 Want more?

⭐ Best thing to read next MDN: Flexbox — the official guide from Mozilla, with lots of pictures of boxes lining up. Reading it counts as a lesson block! And for extra fun: Flexbox Froggy — a whole GAME about flexbox where you move frogs onto lily pads with real CSS. Seriously, it's great.