demo · v149

Balanced Tags

Two identical tag clouds — one with the legacy flex-wrap: wrap, one with the v149 balance. Watch the second line of each.

Checking flex-wrap: balance support...

flex-wrap: wrap (legacy)

flex-wrap: balance (v149)

Shuffle, force the orphan preset, or add the oversize tag to see how line balance changes.

the rule

.cloud {
  display: flex;
  flex-wrap: wrap;     /* fallback */
}

@supports (flex-wrap: balance) {
  .cloud {
    flex-wrap: balance;
  }
}

see also

implementation reference

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