v149 · css · developer trial
flex-wrap:balance
A new value for flex-wrap that distributes flex items across lines so the lines have roughly equal content — the same balancing behaviour that text-wrap:balance brings to text, now applied to flex lines. Useful for tag clouds, pill groups, and card grids where the last line would otherwise be jarringly short.
flex-wrap: balance is in developer trial in Chrome 149 — enable via chrome://flags/#enable-experimental-web-platform-features to test. Ships as enabled by default in Chrome 150.
at a glance
| Status in 149 | In developer trial (behind a flag) |
|---|---|
| Ships by default | Chrome 150 |
| Flag | chrome://flags/#enable-experimental-web-platform-features |
| Standards position | Firefox: No signal · Safari: No signal |
| Spec | CSS Flexbox Level 2 (CSSWG editor's draft) |
| ChromeStatus | 4547107962486784 — flex-wrap:balance |
why it exists
When you have a flex container with flex-wrap: wrap and the items don't divide evenly across lines, the last line ends up with fewer items than the others. For a tag cloud this looks visually uneven — all full lines above a single orphaned chip at the bottom. flex-wrap: balance runs a balancing algorithm that adjusts line breaks so the number of items per line is as equal as possible, producing a tidier grid-like appearance without switching to display: grid.
the property value
| Property | flex-wrap |
|---|---|
| New value | balance |
| Existing values | nowrap, wrap, wrap-reverse (unchanged) |
| Direction | Rows only (same as flex-wrap: wrap). The main axis wraps; balance applies to line lengths. |
live demo
Resize the container to see how balance redistributes items compared to wrap.
flex-wrap: balance
flex-wrap: wrap (for comparison)
.tags {
display: flex;
flex-wrap: balance; /* distributes evenly across lines */
gap: 0.5rem;
}recipes
Tag cloud
.tag-cloud {
display: flex;
flex-wrap: balance;
gap: 0.5rem;
justify-content: center;
}Pill navigation with balanced rows
.pill-nav {
display: flex;
flex-wrap: balance;
gap: 0.375rem 0.5rem;
}
.pill-nav a {
padding: 0.25rem 0.75rem;
border-radius: 999px;
border: 1px solid currentColor;
}browser support
| Chrome | 149 |
|---|---|
| Edge | 149 (Chromium) |
| Firefox | No signal |
| Safari | No signal |