Flex无法实现真正瀑布流，因flex-direction:column与flex-wrap:wrap在主流浏览器中均无效；column-count是轻量可靠的原生替代方案，兼容性好且无需JS。
Flex 本身无法实现真正瀑布流，flex-direction: column; flex-wrap: wrap 在所有主流浏览器中均无效 —— 不是你写错了，是规范不支持。
为什么 flex-flow: column wrap 一定不能用
浏览器对 column 主轴下的 flex-wrap 没有定义行为，实际表现因引擎而异：
- Chrome / Edge：直接忽略
wrap，退化为单列纵向堆叠 - Safari：若容器设了
height，子项常被截断或溢出，且所有列强制拉齐到最高列高度 - Firefox：可能渲染出多列，但语义错乱、无障碍读取顺序崩坏
典型错误写法：display: flex; flex-direction: column; flex-wrap: wrap; height: 600px; → 页面顶部堆满内容，底部大片留白，或直接撑破容器。
column-count 是最轻量可靠的平替方案
它不是“模拟”瀑布流，而是原生支持内容按列流式填充，且无需 JS 干预：
- 只需三行关键样式：
column-count: 3、column-gap: 16px、子项加break-inside: avoid - 兼容性极好：Chrome 50+、Firefox 52+、Safari 14.1+、IE10+ 都支持基础特性
- 切忌给容器加
display: flex—— 这会直接禁用多列渲染 - 子项别写
width: 100%，改用max-width: 100%，否则会强制占满整列
示例结构：
.waterfall {
column-count: 3;
column-gap: 16px;
}
.waterfall > * {
break-inside: avoid;
max-width: 100%;
}
需要 DOM 顺序 ≠ 视觉顺序时，才考虑多列 Flex 容器 + JS 分组
比如必须底边对齐、或需控制 item 落在哪一列（column-count 无法指定），就得用外层 flex-wrap: wrap + 内层多个 flex-direction: column 容器：
- 列数必须提前确定（如两列），JS 需维护一个
columnHeight数组 - 每次插入新项前，查
Math.min(columnHeight)对应的索引，而非用index % 2静态分配 - 图片加载完成前高度为 0，必须监听
@load或用IntersectionObserver触发真实高度更新 - 列容器建议加
contain: layout style减少重排开销
这个方案复杂点不在 CSS，而在资源加载时机和 DOM 顺序 —— 图片异步加载导致高度突变，列高瞬间失衡；屏幕阅读器可能按列拼接读取，造成语义混乱。
真正容易被忽略的，从来不是怎么写 CSS，而是图片加载、字体重排、无障碍语义这三件事在瀑布流里会同时放大问题。选 column-count 就绕过大部分坑；非要 Flex 多列，就得把 JS 的高度同步逻辑做扎实，不能只靠初始 DOM 顺序。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
