by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12450
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

一、内联balance排版

3年前有介绍过内联元素的balance排版，就是使用text-wrap:balance声明，很好用，我已经在真实项目中使用了。

可以让居中排版的多行元素每一行的数量尽可能均衡，使视觉效果更好。

眼见为实，您可以狠狠地点击这里：text-wrap:balance实现头像均衡布局demo

目前所有主流浏览器都已经支持，可以放心大胆使用，就算浏览器不支持，也仅仅是传统排版效果而已。

更多信息可以访问这里：快速了解text-wrap:balance的作用

好消息！

现在不仅内联元素，块级元素也支持balance排版了，那就是flex-wrap: balance。

二、flex布局balance排版

Flex布局实现balance排版很简单，只需要将传统的flex-wrap:wrap声明替换为flex-wrap:balance就可以了。

来看下效果对比，默认wrap排版会优先前排的宽度，直到宽度放不小，才会换行显示，比方说这般：

如何选择balance排版，则每一行的标签数量会尽可能的均等，于是排版布局效果就会是这样的：

眼见为实，您可以狠狠地点击这里：flex-wrap:balance与Flex布局均衡排版demo

三、flex-line-count指定均衡行数

默认情况下的均衡排版会充分利用容器宽度。

实际上，Flex布局提供了能力，可以指定均衡排版的行数，就是使用flex-line-count属性。

例如：

.container {
  display: flex;
  flex-wrap: balance;
  flex-line-count: 3;
}

那么书籍标签就会三行显示，每行均分两个标签，效果如下图所示：

衍生作用

指定flex-line-count的数量后，我们其实可以很方便的在Flex布局中实现瀑布流布局效果。

指定Flex容器为垂直排版，设置flex-line-count为固定的列表值，此时，无论Flex子项的数量多少，都会瀑布一样的方式往下排版。

大家不妨想想一下上面三行均衡排版图旋转90°之后的效果，如果列表项足够多，是不是就是瀑布流排版呢？

具体示例我就不放出来了，AI时代，大家知道有这么回事就好了。

或者看下面的示意脑补下吧，

四、兼容性以及若干碎碎念

Flex布局的balance排版的兼容性如下：

虽然看起来Chrome 150才支持，但并不影响我们的使用，因为某种意义上，此特性是渐进增强特性。

.container {
  display: flex;
  flex-wrap: wrap;
  flex-wrap: balance;
}

如果浏览器支持，那就是balance排版，如果不支持，还保持现在的wrap排版，并不会造成显著的影响。

碎碎念时间

最近突然冒出了个step-5的模型，最近CodeBuddy和WorkBuddy中限免，试用了下，除了思考慢了点，最终效果还可以。

是一家名叫阶跃星辰 – stepFun的公司开发的，以前听都没听过，突然冒出来的，还真是有趣。

说不定什么时候，某个会自学习的AI模型是从其他模型公司突然涌现。

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=12450

（本篇完）