A Flexbox Header Row That Survives Longer Words

A site header is the most common flex row there is: a logo, a group of links, and an action button, spread across the top of the page. display: flex with justify-content: space-between and align-items: center gets it right on the first try, in English, on a wide screen. The trouble starts when the words change. This site's header is a working example, and the first thing Flexbox playground shows you is that same row, read live from the page you are on.

The one-line version

This site's header container is a flex row with align-items: center, justify-content: space-between, a 20px gap and a fixed 68px height. With three children, space-between puts the first at the start, the last at the end and the middle one exactly between them. You can rebuild it in the playground: three items, Justify content set to Space between, Align items set to Center, Gap at 20.

The playground's live example reads those values off this site's own header when the tool page loads. One honest quirk: the playground's Gap slider moves in steps of 4, so a gap that is not a multiple of 4 is shown at the nearest step. Between 641px and 960px wide the header's real gap is 10px, and the playground shows it as 12.

What goes wrong: the words get longer

Flexbox's default for a row is no wrap and shrink 1, so when the three items no longer fit, the browser squeezes them, and when they cannot shrink below their content, the row simply overflows the page. Translation is what pushed this site's header there. The navigation labels are a few words each, and in English they fit. In other languages the same labels are longer. The project's own measurement, recorded in its stylesheet, found the unwrapped row overflowing its container well past 960px wide by 117px in Spanish, 77px in French and 43px in German.

No single breakpoint fixes that, because each language runs out of room at a different width. The site keeps a 960px media query as the fallback for visitors without JavaScript, and otherwise a small script checks whether the row's real content fits and switches on the wrapped layout only when it does not.

What the wrapped layout does

Turning on flex-wrap: wrap alone is not enough. With three items and space-between, a wrap would drop the last item onto a second line by itself, and space-between with a single item on a line packs it to the start. The action button would end up stranded under the logo.

So the wrapped header does two more things to the links group: order: 3 moves it after the actions in the layout, and flex-basis: 100% makes it want the whole width, so it can only sit on a line of its own. The logo and the actions stay on the first line, at opposite ends, and the links get the full second line, centred, with their own wrap if they need it. A row-gap of 8px separates the two lines and the fixed 68px height is switched to auto so the header can grow.

.header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 10px;
}
.header .links {
  order: 3;
  flex-basis: 100%;
}

You can see the effect in the playground before writing any of it: Wrap on, three items, select item 2 and set its Basis to 100% in Percent mode. Item 2 takes a line of its own and item 3 drops below it onto a third line, which is exactly the problem order solves. The playground has no control for order, so add it by hand when you copy the CSS.

For the mechanics of why items squeeze before they overflow, see the background guide. For a single fixed item next to one that fills the row, see the step-by-step. Or open the playground and start from this site's own header.