v150 · CSS
Compatibility Lab
Runs CSS.supports() probes for flex-wrap: balance, shows a side-by-side drag comparison against flex-wrap: wrap, and provides a progressive-enhancement pattern that falls back gracefully in older browsers.
browser support probes
side-by-side comparison — drag to resize
Drag sliders to see orphan behavior (wrap) vs. even rows (balance).
⚠ flex-wrap: wrap (greedy)
rows: —
✓ flex-wrap: balance (even)
rows: —
progressive enhancement pattern
.tag-list {
display: flex;
flex-wrap: wrap; /* fallback — works everywhere */
gap: 8px;
}
/* Use balance where supported */
@supports (flex-wrap: balance) {
.tag-list {
flex-wrap: balance;
}
}
see also
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗