v150 · CSS

flex-wrap:balance

A new flex-wrap value that distributes flex items evenly across rows — like text-wrap: balance for flex containers. Instead of greedily filling each row, the browser recalculates the optimal row count to produce roughly equal-width rows with no orphaned items.

concepts

  1. Balanced Tags

    A tag cloud where flex-wrap: balance produces even rows automatically. Resize the viewport or add/remove tags to see the difference vs flex-wrap: wrap.

  2. Headline Equalizer

    A card grid with pill-shaped category labels. balance distributes the pills symmetrically regardless of how many there are — no ragged last-row orphans.

  3. Navigation Menu

    A site nav that wraps on narrow viewports. The flex-wrap: wrap version frequently orphans a single link on the last row; flex-wrap: balance prevents it. Width slider + add/remove items to see both behaviors live.

  4. Skill Badges

    A developer profile card with skill badges of varying widths. Resizeable container with a wrap vs balance toggle — shows how the greedy algorithm orphans a badge on the last row while balance distributes them symmetrically.

  5. Tag Cloud

    A tag cloud split into two panels — default flex-wrap: wrap on the left, flex-wrap: balance on the right. Add and remove tags to grow or shrink the cloud; the row counts for each panel update live so you can see exactly how balance redistributes items across rows.

  6. Authoring Studio

    Configure a flex container live — flex-wrap value, justify-content, gap, container width, item count, and item width preset. Add or remove items dynamically and watch the balanced distribution adjust. Generates a copyable CSS snippet.

  7. Compatibility Lab

    Five CSS.supports() probes for flex-wrap: balance, a side-by-side drag comparison (wrap versus balance) with live row counters, and a @supports progressive-enhancement fallback pattern.

why it shipped

flex-wrap: wrap uses a greedy algorithm: fill a row until an item doesn't fit, then start a new row. This produces an aesthetically unpleasant "orphan" problem where a final row might have just one item while earlier rows are packed. text-wrap: balance solved the same problem for text wrapping in Chrome 114, and developers immediately asked for an equivalent for flex containers. flex-wrap: balance is the answer — the browser runs a balancing pass to compute the minimum number of rows that yields roughly equal line lengths, matching what a designer would do manually.

references

implementation reference

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