Goal

You’ll apply everything from this Part’s Flexbox lessons to build something you’d actually use: a real, working navigation bar with a logo on one side and links on the other, and understand why real navbars almost always need nested flex containers, not just one.

Learn

A typical nav bar layout needs: a logo on the left, a group of links on the right, both vertically centered, spread across the full width of the header. This is a textbook Flexbox job, but it involves a detail beginners often miss: it actually needs two flex containers, nested, not one.

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
}
.nav-links {
  display: flex;
  gap: 20px;
  align-items: center;
}

The outer .navbar container has exactly two children conceptually: the logo, and the entire group of links treated as one unit. space-between pushes these two things to opposite ends. align-items: center vertically aligns them even if the logo image and the text links have different natural heights.

The inner .nav-links container is a second, separate flex container, responsible only for arranging the individual links within that group — spacing them evenly with gap, and centering them vertically relative to each other.

Decision Task

Inside the link group itself, you have four links that need small, even gaps between them, but you don’t want to use margin on every single link (fragile and repetitive, and easy to get inconsistent if someone forgets one). Before reading on: what single modern CSS property, added to the link group’s own container, solves this cleanly?

Reveal the Answer

gap — for example gap: 20px; on the flex container holding the links. It adds consistent spacing between flex children without needing individual margins on each one, and importantly, it doesn’t add unwanted extra space before the first item or after the last item, the way margin-based approaches often do if you’re not careful about applying margin only “between” items rather than on every side of every item.

Common Mistake

Building the whole navbar as one single flex container with five items (logo + four links directly) and applying space-between directly to all of them. This spreads the links apart from each other too, when really only the logo-vs-links grouping should be spread apart from each other — the four links themselves should stay close together as their own visual group. The fix is exactly the nesting shown above: one flex container for the overall bar (logo vs. link-group as two units), and a second flex container just for the links themselves.

Practice Questions

1. Why does a realistic navbar usually need two nested flex containers instead of one?

Show Answer

Because space-between needs to treat the logo and the entire link group as exactly two things to spread apart; nesting keeps the links together as one unit while still separating them individually with gap inside their own container.

2. If you accidentally put all five elements (logo + four links) directly into one flex container with space-between, what visual problem would you actually see?

Show Answer

All five items, including the four links, would be spread apart from each other across the full width, rather than the links staying grouped together near one side.

3. Rewrite this using gap instead of individual margins, assuming four links inside a container called .nav-links:

Show Answer

.nav-links { display: flex; gap: 20px; } — removing the individual margin-right entirely.

4. True or False: align-items: center on the outer .navbar container is necessary even if the logo and links happen to be the exact same height.

Show Answer

Not strictly necessary if heights already match exactly, but it’s good practice regardless, since it protects the layout automatically if the logo’s actual height changes later (a new logo image, for example) without needing to remember to re-check alignment.

5. Explain, using this lesson’s structure, how you’d add a third grouped item to the navbar — for example, a search icon — positioned between the logo and the links, still using space-between correctly.

Show Answer

With three grouped items now (logo, search icon, link group) inside the outer flex container, space-between would spread all three across the row with even gaps between them — if that’s not the desired look, you might switch the outer container to a different justify-content value, or restructure which elements count as the “outer” three groups.

Try It Yourself

You need the nav bar to stack vertically (logo on top, links below) on small screens, but stay horizontal on larger ones. Which Flexbox property would you change for that, and what other CSS feature from later in this course would actually control when that change happens?

Show Answer

you’d change flex-direction from row to column, and a media query controls when that switch occurs — covered in Part 3.

Quick Check

1. Why is nesting two flex containers often necessary for a navbar with a logo and a link group?

Show Answer

So space-between only spreads the logo vs. the link group apart, not every individual link.

2. What property adds spacing between flex children without individual margins?

Show Answer

gap.

3. What real navbar problem does align-items: center solve?

Show Answer

It keeps the logo and links vertically aligned even if they have different heights.

4. You need the nav bar to stack vertically (logo on top, links below) on small screens, but stay horizontal on larger ones. Which Flexbox property would you change for that, and what other CSS feature from later in this course would actually control when that change happens?

Show Answer

you’d change flex-direction from row to column, and a media query controls when that switch occurs — covered in Part 3.

5. Inside the link group itself, you have four links that need small, even gaps between them, but you don’t want to use margin on every single link (fragile and repetitive, and easy to get inconsistent if someone forgets one). Before reading on: what single modern CSS property, added to the link group’s own container, solves this cleanly?

Show Answer

gap — for example gap: 20px; on the flex container holding the links. It adds consistent spacing between flex children without needing individual margins on each one, and importantly, it doesn’t add unwanted extra space before the first item or after the last item, the way margin-based approaches often do if you’re not careful about applying margin only “between” items rather than on every side of every item.