demo · v149
Container Resizer
One row of chips. Drag the width slider and toggle the wrap mode. balance shifts items between lines so each line carries a similar number — most visible at widths where vanilla wrap would leave one chip stranded on its own.
Note: your browser doesn't appear to support
flex-wrap: balance. Demo will render but both panels will look identical. Try Chrome 149+.
480px
mode · wrap
#chrome149
#flexbox
#balance
#webplatform
#layout
#css
#interop
#wrap
#chips
lines: —
longest line: — chips
shortest line: — chips
the rule
.row {
display: flex;
flex-wrap: balance; /* v149 */
gap: 0.5rem;
}Like text-wrap: balance, this is a paint-time hint to the layout engine. It doesn't change the order of items or their sizes — only which items end up on which line.
see also
- flex-wrap: balance — feature index
- Balanced Tags — side-by-side comparison
- ChromeStatus entry
- CSS Flexbox 2 draft
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗