v149 · CSS · Flexbox

Line Load Visualizer

When flex items wrap, lines can end up wildly unequal. flex-wrap: balance redistributes items so lines carry similar load. This visualizer measures how many items land on each line and shows the balance score for wrap vs. balance.

9 items
80px
flex-wrap: wrap (unbalanced) ↔ drag right edge to resize
flex-wrap: balance same items, same container
—wrap imbalance
—balance imbalance
—improvement
/* Chrome 149: balance value for flex-wrap */
.tag-cloud {
  display: flex;
  flex-wrap: balance; /* ← new: distributes load across lines */
  gap: 8px;
}

/* Compare with the old default: */
.tag-cloud {
  display: flex;
  flex-wrap: wrap;    /* last line can be short */
  gap: 8px;
}

see also

implementation reference

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