Flexbox fundamentals: building the real header and navigation

Every layout so far has relied on the real, default block and inline flow from part 8. Flexbox is CSS's real, purpose-built system for arranging elements along a single row or column — starting here with Bright Leaf Coffee's actual header, which needs its logo and navigation links positioned deliberately, not just stacked in default document order.

The real header this part builds

<header class="site-header">
  <img src="/images/logo.svg" alt="Bright Leaf Coffee" class="logo" />
  <nav class="main-nav">
    <a href="/">Home</a>
    <a href="/subscriptions">Subscriptions</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
  </nav>
</header>

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem var(--space-lg);
}

.main-nav {
  display: flex;
  gap: var(--space-lg);
}

display: flex: turning on the real layout system

Setting display: flex on .site-header makes it a real flex container — every direct child (the logo image and the <nav>) becomes a real flex item, arranged in a row by default, left to right. This single declaration is what replaces what used to require floats and manual clearing in older CSS — a real, purpose-built system instead of a layout mechanism borrowed from something it wasn't originally designed for.

The real main axis: justify-content

.site-header {
  justify-content: space-between; /* logo and nav pushed to opposite ends */
}

flex-start      → items packed at the start (the default)
center           → items packed together in the center
space-between    → real, even space distributed BETWEEN items only
space-around     → real, even space around each item, including the ends

justify-content controls alignment along the real main axis — horizontal, for the default row direction used here. space-between is exactly right for this header: the logo stays pinned to the left edge, the nav to the right, with the real, available space between them growing or shrinking as the viewport width changes, with zero manual positioning math required.

The real cross axis: align-items

.site-header {
  align-items: center; /* vertically centers the logo and nav */
}

align-items controls alignment along the real cross axis — perpendicular to the main axis, so vertical for this row-direction header. center here is what keeps the logo image and the nav links vertically centered relative to each other, even if they have slightly different real heights — a real, common alignment need that used to require genuine hacks (like manually calculated padding or vertical-align tricks) before Flexbox existed.

gap: real, even spacing without margin math

.main-nav {
  display: flex;
  gap: var(--space-lg);
}

gap adds real, even spacing between flex items only — never before the first or after the last, unlike using margin on each item, which requires either a real :last-child exception or accepts uneven trailing space. This is a genuinely simpler, more reliable way to space out the nav links than the older real pattern of margin-right on every link except the last.

flex-direction: real column layouts, same system

.mobile-nav-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

flex-direction: column swaps the real main axis to vertical — genuinely useful for Bright Leaf Coffee's mobile navigation panel, which needs its links stacked vertically rather than in the horizontal row used for the desktop header above. Every other Flexbox property covered in this part works identically, just rotated onto the new real axis.

Next: Flexbox deep dive — flex-wrap, flex-grow, and flex-shrink, building Bright Leaf Coffee's real, wrapping subscription cards grid.