← Chrome 150 reference

v150 · covered on mdn

flex-wrap:balance

A new value for the flex-wrap property that distributes flex items evenly across wrap lines — eliminating the "orphan item on last line" problem without JavaScript — shipped in Chrome 150.

this API is documented on MDN

flex-wrap — CSS — MDN Web Docs

gendn doesn't duplicate APIs that MDN already covers. MDN's flex-wrap page documents the balance value, its interaction with other flex properties, and browser support. Chrome 150 is the first Chromium-based release to ship this value.

quick example

/* Without balance: last line may have far fewer items */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* With balance: items distributed evenly across all lines */
.card-grid-balanced {
  display: flex;
  flex-wrap: balance;
  gap: 1rem;
}

With flex-wrap: balance the browser redistributes items so that no wrap line has significantly more or fewer items than others. The visual effect is similar to text-wrap: balance but for flex containers — a responsive card grid, tag cloud, or nav list stays visually even as the viewport width changes, with no orphaned items on the last row.

references