v149 · css · flexbox
Nav Toolbar
Navigation bars with items of varying widths are the classic case where flex-wrap: wrap leaves a single orphaned item on the last row. Drag the width slider to see how balance distributes items evenly and prevents the orphan.
This browser does not support flex-wrap: balance. The demo uses wrap as a safe fallback instead of overflowing; open it in a supporting Chrome build to compare native balanced wrapping.
Quick scenarios — resize to a typical orphan width:
Side-by-side comparison
Same items, same container width, same gap — the only difference is flex-wrap. Orphaned last items in wrap are highlighted in red.
flex-wrap: wrap (default)
flex-wrap: balance (Chrome 149)
/* Before: orphaned last item is common */
.toolbar { display: flex; flex-wrap: wrap; gap: 0.4rem; }
/* After: items distributed evenly across rows */
.toolbar { display: flex; flex-wrap: balance; gap: 0.4rem; }
/* Works for nav bars, tag clouds, chip groups, button rows —
any flex container where visual balance matters more than
maximal line packing. */see also
- Balanced Tags — tag cloud comparison
- Container Resizer — live width + mode controls
- Chip Editor — add/remove chips and watch balance adapt
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗