A new CSS property, flex-wrap: balance, shipped in Chrome 150, solves the common problem of a lone flex item wrapping onto its own line by distributing items evenly across lines instead of using media queries. The piece walks through a real-world Buffer.com layout bug and demonstrates four workaround techniques (container queries, conditional clamp with max-width, display: contents, and pseudo-element ordering) before showing the simple balance solution. It also covers a companion property, flex-line-count, which forces a minimum number of wrap lines, and explores using it to build masonry-like layouts with round() and container query units.
Table of contents
IntroductionFlex wrap balanceReal world example: Buffer.com social connect sectionFlex line countOutroQuestions this post answers
What does the CSS flex-wrap: balance property do and which browser supports it?
flex-wrap: balance distributes flex items evenly across wrapped lines instead of leaving a lone orphan item on the last line. It shipped in Chrome 150 and is Chrome-only at this point. Applying it to a flex container with flex-wrap enabled automatically balances items like navigation links or icon rows without needing media queries or manual max-width hacks. Developers tracking new CSS wrapping behavior can follow flexbox updates like this on daily.dev.
How does the CSS flex-line-count property work with flex-wrap: balance?
flex-line-count sets a minimum number of lines for wrapped flex items, forcing items to wrap into multiple lines even when there's enough space to fit them on one. Combined with flex-wrap: balance, setting flex-line-count: 2 forces a six-item list to split into two balanced lines instead of staying on a single row, useful for navigation menus and masonry-style layouts. Anyone experimenting with flexbox masonry layouts can dig into practical CSS demos on daily.dev.
How can I force a fixed number of columns in a flexbox masonry layout that adjusts responsively?
Combine flex-direction: column, flex-wrap: balance, and flex-line-count with a calculated column count using CSS round() and container query units: clamp(1, round(down, 100cqw / cardMinWidth), maxColumns). This dynamically adjusts the number of columns based on container width while flex-line-count controls how many lines (columns) the layout forces, though reading order won't match the visual order. Developers building responsive masonry grids can compare CSS layout techniques like this on daily.dev.