Flex to Impress

Can Flexbox Make the Menu Responsive?

Time to intervene.
Our stubborn, static “desktop-or-nothing” menu finally gets its first makeover — and the star of the show is Flexbox.

This chapter transforms the rigid baseline into something that actually responds when the viewport changes. Nothing dramatic yet — just good layout fundamentals and a much better attitude.

---

✨ What Flexbox Fixes Instantly

Compared to the old, crusty layout:

• Links finally wrap or reflow instead of bailing off-screen
• Spacing becomes predictable instead of “vibes-based”
• The nav adapts to different widths — y’know, responsiveness
• No more horizontal scroll of shame

Flexbox = breathing room + instant sanity.

---

🧱 Same HTML, New Layout

We keep the exact same markup as before:

<header class="site-header">
  <div class="brand-lockup">
    <span class="site-logo">⚡</span>
    <span class="site-title">WebDevTnT</span>
  </div>

  <nav class="site-nav">
    <ul class="nav-list">
      <li><a href="#">Overview</a></li>
      <li><a href="#">Lessons</a></li>
      <li><a href="#">Demos</a></li>
      <li><a href="#">Assignments</a></li>
      <li><a href="#">Resources</a></li>
    </ul>
  </nav>
</header>

The glow-up is 100% CSS.

---

💄 Fresh Flexbox Styles

Here’s the “flex it, but keep it classy” version:

.site-header {
  width: 100%;
  max-width: 960px;
  margin: 2rem auto;
  padding: 1rem 1.5rem;
  background: #020617;
  color: #e5e7eb;
  border-radius: 999px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; /* 👈 allows wrap on small screens */
}

.nav-list {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap; /* 👈 this is the magic */
  font-size: 0.95rem;
  margin-top: 0.75rem;
}

The only big ideas:

• display: flex for alignment
• flex-wrap: wrap so items don’t flee the viewport
• fluid width instead of a fixed 960px prison

Small change, big redemption arc.

---

🧪 Live Demo: Stretch, Shrink, Behave

This one plays nice(r) — resize and reflow away.

⚡

WebDevTnT

• Overview
• Lessons
• Demos
• Assignments
• Resources

Resize the window — the menu flexes with the layout instead of bailing off-screen.

Cool-ish, but we can cook up something much better

---

🍱 Takeout Notes

Stuff these flex facts in your apron pocket:

• Flexbox gives you instant responsive alignment.
• flex-wrap: wrap is the unsung hero of small-screen layouts.
• The best refactors don’t change HTML — just behavior.
• This is the calm before the storm… because next, we add JavaScript. 😏

---

Next Up

03 · Bun and Done
The hamburger toggle arrives — and your nav finally learns a new trick.