v150 · CSS · Navigation

Navigation Menu

Site navigation links that wrap on narrow viewports are notorious for leaving one orphan link alone on the last row. flex-wrap: balance distributes links evenly across rows — one attribute, no JavaScript, no media queries, no orphan.

Checking flex-wrap: balance support…

compare

Width: 380px
flex-wrap: wrap (orphan possible)
⚠ orphan on last row
flex-wrap: balance (even rows)

add / remove items

Items:
SITE ← resize via slider above

code

/* One line change — replace 'wrap' with 'balance' */
nav {
  display: flex;
  flex-wrap: balance; /* was: wrap */
  gap: 4px;
}

/* Before: developers worked around orphans with:
   - Adding invisible spacer items
   - JavaScript to calculate when the last row would have one item
   - Media queries hardcoded for specific breakpoints
   - text-align: center + inline-flex (only works for equal-width items)

   flex-wrap: balance does it automatically. */

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗