flex-wrap: balance

concepts

1. Balanced Tags

   A tag cloud with mixed-width children. Toggle between wrap and balance and watch the lines settle into roughly equal lengths.

2. Container Resizer

   One row, a width slider, and a wrap-mode toggle. Live readouts count lines and chips-per-line so you can see exactly when balance rescues a stranded last-line item.

3. Line Load Visualizer

   Control item count and average width, then compare wrap vs. balance with bar charts showing how many items land on each line. A numeric imbalance score (max − min line count) makes the improvement measurable.

4. Nav Toolbar

   A navigation bar with 11 items of varying widths. Drag the container-width slider and toggle between wrap and balance to see how balance prevents orphaned single-item last rows. Includes a side-by-side comparison with orphan highlighting.

5. Chip Editor

   Add and remove chips interactively — type your own labels or click presets. An imbalance score updates live as the chip set changes, showing exactly when and how much balance improves the layout over wrap.

6. Filter Row

   An e-commerce filter panel with category, brand, and price range chips. Toggle between flex-wrap: wrap and balance to see how balance prevents orphaned single chips on the last row — particularly visible in the 11-chip category section.

why it shipped

Default flex-wrap: wrap greedily packs each line to capacity. With variable-width children — tags, chips, button rows — that often leaves the last line lopsidedly short, so the whole block looks unbalanced. The balance value tells the layout algorithm to look at the full set of children and pick a wrap that minimises line-length variance. It matches what text-wrap: balance does for inline text, and it gives flex layouts the visual rhythm authors usually want.

references

• ChromeStatus entry
• CSS Flexbox 2 draft