---
title: "Balancing flex items with flex-wrap: balance"
url: https://daily.dev/posts/balancing-flex-items-with-flex-wrap-balance-vyfwzd9n7
source_url: https://ishadeed.com/article/flex-wrap-balance
type: article
source: "Ahmad Shadeed"
published: 2026-08-25T15:53:03.507Z
updated: 2026-08-25T15:53:51.540Z
tags: ["css", "ui-design", "google-chrome"]
reading_time: 9
upvotes: 2
comments: 0
language: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Balancing flex items with flex-wrap: balance

**[Ahmad Shadeed](https://daily.dev/sources/ishadeed)** · 9 min read · 2 upvotes · 0 comments

## Summary

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.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://ishadeed.com/article/flex-wrap-balance>

## Questions 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._

## Similar posts on daily.dev

- [When to use CSS text-wrap: balance vs. text-wrap: pretty](https://daily.dev/posts/when-to-use-css-text-wrap-balance-vs-text-wrap-pretty-ipjr740y7) · LogRocket · 1 upvotes · 0 comments

---

Tags: [#css](https://daily.dev/tags/css), [#ui-design](https://daily.dev/tags/ui-design), [#google-chrome](https://daily.dev/tags/google-chrome)

[View this post on daily.dev](https://daily.dev/posts/balancing-flex-items-with-flex-wrap-balance-vyfwzd9n7)