Build a Flexbox header

Time to use everything from this module on the course page. The header has a site name on one side and a navigation list on the other. Right now they stack in normal flow. Let’s put them on one row.

The header needs the two children spread apart and centered vertically. The navigation needs its links side by side. Both need to wrap when there isn’t enough room:

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem;
}

.site-nav {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

Let’s walk through what each part does.

display: flex on .site-header puts the site name and the nav on one row. justify-content: space-between pushes them to opposite ends. align-items: center lines them up vertically even when the site name is taller than the links.

flex-wrap: wrap is the safety net. On a narrow screen the nav drops under the site name instead of squeezing the two into an unreadable line. The gap keeps a consistent space whether they sit side by side or stacked.

.site-nav is a second flex container nested inside the first. That’s normal. Each container only manages its own direct children. The links wrap onto a second line when the nav gets narrow.

If your nav is a <ul>, remove the default list padding and bullets too:

.site-nav ul {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

Test it with real conditions

A header that looks fine with “Acme” and three links can fall apart in production. Try these before moving on:

• change the site name to something long, like “Flavio’s Guide to Modern CSS Layout”
• add three more links with long labels
• zoom the browser to 200%
• narrow the window to about 320px

At every step the links should wrap and stay tappable. If something clips or two links overlap, you have a fixed width somewhere or a missing flex-wrap.

Don’t reorder with order

Flexbox has an order property that moves items visually. Resist it here. If the nav should come before the site name, change the HTML. Screen readers and the Tab key follow the source, and a visual order that disagrees with it confuses keyboard users.

When the header survives the long name, the extra links, and the zoom, you’ve built a real Flexbox layout. The quiz below checks the concepts from this module.

Quick check

Start quiz

Result

You got of right.

Try again