标签云最后一行总是孤零零挂一个？今天 Chrome 150 让 Flexbox 自己把每行分均匀了

你随手排了一行标签云，五个刚刚好，六个的时候最后一个孤零零掉到第二行——这个「孤儿」排版问题在 CSS 里折腾了十几年，今天浏览器自己会算了。

先说结论

Chrome 150 起，Flexbox 多了一个 flex-wrap: balance 关键字。它让浏览器在换行时主动把项目均匀分配到各行，而不是像以前那样「能塞多少塞多少，剩下的甩到最后一行」。配套还有一个新属性 flex-line-count，可以强制最少几行。

一行代码的改动：

/* 以前 */
.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

/* 现在 */
.list {
  display: flex;
  flex-wrap: balance; /* 就换这一个词 */
  justify-content: center;
  gap: 0.5rem;
}

盒模型没变、gap 没变、轨道没变。变的只是哪些项目落在哪一行——浏览器把「哪一行放几个」这件事从你的样式表里收走了。

这个「孤儿」问题到底有多烦

flex-wrap: wrap 的行为是：沿主轴尽可能多地塞满一行，塞不下才换行。所以 5 个变 6 个、或者某个断点宽度下，最后一行经常只剩一个孤零零的项目。

为了治它，前端这些年发明了一整套「黑魔法」：

• 给项目加 max-width + 条件 clamp()：掐着宽度强行让它在问题宽度提前换行。问题是每换一次内容就要重新调参。
• display: contents 分组：把小屏下的分组打散，让子元素直接参与父级 flex 行。可行，但语义被搞乱了。
• 塞一个隐形 flex item 进中间：靠 order + 伪元素让算式「凑得刚刚好」。三个方案里最丑的一个。
• 媒体查询 / 容器查询硬编码 margin：按断点手动补偿，断点一多就是灾难。

每一个都能上线，但每一个都是承重细节——内容一变、断点一挪，就得回头重新调。

/* 你可能写过的伪元素补偿 */
.list::after {
  content: "";
  flex: 1 0 200px; /* 假装还有一个项目占位 */
  height: 0;
}

flex-wrap: balance 把这份判断从样式表搬进了布局引擎。

flex-line-count：连「几行」也一起管

balance 决定每行放几个，但它不改变行数——默认还是按原来的算法决定行数，再在各行之间重新分配。有时候你需要的是「至少两行」。

场景：一个导航，你希望它永远折成两行（比如大屏下想给导航容器留背景色，但不想用 max-width 把背景框死）。

.nav ul {
  display: flex;
  justify-content: center;
  flex-wrap: balance;
  flex-line-count: 2; /* 至少两行 */
  gap: 0.5rem;
}

对比以前的做法：

/* 老办法：靠 max-width 逼它换行 */
.nav ul {
  max-width: 320px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

老办法能用，但 max-width 把导航包裹层也框住了——你想给外层加个背景色，宽度就受限。flex-line-count 只影响内部换行，包裹层宽度原样保留。

两个属性配合，还能拼出一点「类 masonry」的效果：flex-direction: column + flex-wrap: balance + flex-line-count: N，在列方向上也做均衡分配。

浏览器支持：现在还是「渐进增强」

• Chrome / Edge 150+：已支持（balance 与 flex-line-count）
• Firefox：standards-position 已给出 Positive（2026-09 关闭 issue），但尚未实现
• Safari / WebKit：暂时 no signal
• 规范：css-flexbox-2（CSSWG 2026-01 已 RESOLVED 加入 balance 关键字）

也就是目前不能算 Baseline。上线时务必做特性检测，不支持的浏览器会忽略这个值、退回原来的 wrap 行为——布局不会炸，只是继续「不均衡」：

.list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

@supports (flex-wrap: balance) {
  .list {
    flex-wrap: balance;
  }
}

你可以马上做的事

挑你项目里最难看的一处换行——标签云、图标行、社交按钮条、面包屑、任何在某个视口宽度会掉出孤儿的 flex 行：

1. 给父容器加一条 @supports (flex-wrap: balance) 里包着的 flex-wrap: balance;
2. 打开 Chrome DevTools，拖动视口宽度看它怎么重新平衡各行
3. 如果还需要固定行数（导航、页脚链接四列等），再叠一个 flex-line-count

一行 CSS，换掉维护了好几年的补偿逻辑。这不是 Flexbox 要跟 Grid 抢饭碗——Grid 处理二维布局，balance 处理的是「换行本身好不好看」。