Flex布局无法实现真正瀑布流，因column主轴下flex-wrap被规范忽略；column-count才是浏览器原生支持的轻量方案，需设column-count、column-gap及每个子项break-inside: avoid。
纯 CSS Flex 无法实现真正意义上的瀑布流——所谓“Flex 瀑布流”要么是视觉错觉，要么依赖 JS 补位。如果你只是想快速上线、不纠结语义或滚动锚点，column-count 是目前最简、最稳、兼容性最好的方案。
为什么 flex-direction: column + flex-wrap: wrap 不 work
这不是你写错了，是浏览器规范层面的限制：Flexbox 在 column 主轴下根本不定义 flex-wrap 的行为。实际效果通常是：
- Chrome/Safari 直接忽略
wrap，退化为单列堆叠 - 即使设了
height，子项会被截断或溢出，而非“跌入最短列” - 就算渲染出多列，所有列也会被强制拉齐到最高列高度，失去错落感
典型错误写法：display: flex; flex-direction: column; flex-wrap: wrap; height: 600px; —— 这段代码在绝大多数现代浏览器里都不可靠。
column-count 是轻量替代方案
它才是浏览器原生支持瀑布流语义的 CSS 方案，三行代码就能跑通：
立即学习“前端免费学习笔记（深入）”；
.container {
column-count: 3;
column-gap: 16px;
}
.item {
break-inside: avoid;
max-width: 100%;
}
关键点：
- 别给容器加
display: flex—— 这会直接禁用多列渲染 -
break-inside: avoid防止卡片被劈开（尤其含图片或文字时） -
max-width: 100%替代width: 100%，否则子项会撑满整列宽度 -
column-gap默认是1em，不重置会导致间距过大
图片加载导致布局抖动怎么办
这是瀑布流最容易崩的环节，不是 CSS 写得不对，而是 DOM 渲染时机问题：
- 图片未加载时高度为 0，
column-count按空内容分列，加载后突然撑高，列高失衡 - 解决办法：用
aspect-ratio占位（如aspect-ratio: 4/3），或提前设置min-height - 如果必须动态插入新项，
column-count无法控制 item 落在哪一列，也做不到点击定位精准锚定
真要可控列分配、滚动同步、无障碍语义一致，就得上 JS 分组 + 多列 flex-direction: column 容器——但那就不是“简化版”了。
