v150 · CSS · demo

Balanced Tags

Add and remove tags and see how flex-wrap: balance distributes them evenly across rows, while flex-wrap: wrap leaves an orphaned last row.

flex-wrap: wrap

flex-wrap: balance ✨

.tag-cloud-wrap {
  display: flex;
  flex-wrap: wrap;        /* greedy fill — possible orphan */
  gap: 0.5rem;
}

.tag-cloud-balance {
  display: flex;
  flex-wrap: balance;     /* browser balances row lengths */
  gap: 0.5rem;
}

see also

Headline Equalizer — pill labels balanced across a card
ChromeStatus entry
MDN — flex-wrap

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗