v149 · css · flexbox
Chip Editor
Add and remove chips interactively. Toggle between flex-wrap: wrap and flex-wrap: balance to see how balance adapts the layout as the chip set grows and shrinks — even with chips of wildly different widths.
This browser does not support flex-wrap: balance. Balance mode uses wrap as a safe fallback; open the demo in a supporting Chrome build to inspect native balancing.
flex-wrap: wrap
/* The chip container only needs one CSS change */
.chip-group {
display: flex;
gap: 0.4rem;
/* before: */ flex-wrap: wrap;
/* after: */ flex-wrap: balance;
}
/* Chips themselves need no changes.
The browser picks a line count that
minimises max-line-width variance. */see also
- Balanced Tags — read-only tag cloud with toggle
- Line Load Visualizer — bar chart of items-per-line
- Nav Toolbar — navigation bar orphan prevention
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗