v150 · CSS · Flexbox
Tag Cloud
A tag cloud with flex-wrap: balance on the right distributes tags evenly across rows — no orphan tags on the last line. The left panel uses flex-wrap: wrap for comparison. Add and remove tags to see the difference grow.
Tag cloud comparison
flex-wrap: wrap (default)
flex-wrap: balance (Chrome 150)
The balanced cloud distributes tags so rows have similar counts — no lone tag orphaned on the last line.
.tag-list {
display: flex;
flex-wrap: wrap; /* default — greedily fills each row */
gap: 0.35rem;
}
.tag-list.balanced {
flex-wrap: balance; /* evenly distributes items across rows */
}
see also
- Balanced Tags — category filter bar comparison
- Headline Equalizer — multi-line headlines
- Nav Menu — balanced navigation links
- Skill Badges — résumé-style badge layout
- ChromeStatus entry
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗