如何使用CSS column-count实现瀑布流布局的初级方案详解

许多开发者认为只需使用column-count就能轻松实现瀑布流布局，但实际效果往往与预期大相径庭——这并非真正的瀑布流，充其量只能算作“伪瀑布流”方案。其本质是在文档流中按顺序切片分栏，浏览器会自动将新内容填入当前高度最短的列中，但这需要同时满足三个硬性条件，缺一不可。

为什么设置了 column-count: 3 却仍然显示为单列？

这是一个非常经典的踩坑场景。当浏览器发现容器没有明确的高度时，就会直接退化为单列模式——这并非Bug，而是CSS规范就是这样设计的。要想真正实现分栏效果，必须满足以下几点：

• 容器上必须显式设置 max-height 或 height，例如 max-height: 70vh；使用 min-height 是完全无效的
• 这个高度属性必须直接作用于瀑布流容器自身，不能依赖父容器间接撑高
• 特别要注意iOS Safari，它对无高度容器的回退行为非常激进，几乎必然退化成单列

break-inside: avoid 为什么必须加在每个子项上？

不加这个属性，翻车现场会非常尴尬——卡片的内容会被从中间劈开：标题在左列，图片却在右列底部。这不是渲染异常，而是column布局默认允许跨列断行。使用时有几个关键点需要牢记：

• 这个属性必须写在每个 .item 上，写在容器上完全无效
• 兼容旧版Safari和IE11时，建议补全前缀：-webkit-column-break-inside: avoid 和 page-break-inside: avoid
• break-inside: avoid-column 只有Safari旧版部分支持，Chrome和Firefox根本不认
• 如果子项使用了 position: absolute，break-inside 会完全失效

column-gap 和 margin-bottom 能混用吗？

绝对不能。混用会导致浏览器的列高计算逻辑出现错乱，最终出现一列堆满、另一列大片留白的尴尬局面。我们来拆解一下：

• column-gap 是列与列之间的通道，浏览器会将其纳入列高分配逻辑
• margin-bottom 是子项自身占用的空间，会干扰“哪列最短”的判断
• 正确的做法是统一使用 column-gap: 16px 控制列间距，千万不要给 .item 添加 margin-bottom
• 如果想控制卡片内边距，改用 padding，它不会影响列高分配

实际开发中最容易被忽略的问题，是图片加载异步带来的高度抖动。DOM渲染时图片还未加载完毕，列高预估就会失准，首屏出现错位。提前使用 aspect-ratio 或 padding-top 占位，远比等JavaScript事后补救要可靠得多。