不能通过 flex-flow: column wrap 实现真正瀑布流效果，因 flexbox 规范不支持 column 主轴下的换列行为，会导致忽略 wrap、截断、拉齐高度或 dom/视觉顺序错位；column-count 是轻量原生替代方案。
不能通过 flex-flow: column wrap 实现真正瀑布流效果。这不是写法问题，而是 Flexbox 规范本身不支持 column 主轴下的换列行为——浏览器会忽略 flex-wrap，或退化为单列堆叠、高度拉齐、内容截断等不可控状态。
为什么 flex-direction: column + flex-wrap: wrap 必然失效
Flexbox 标准明确限定：当主轴为 column 时，flex-wrap 对“换列”无定义行为。实际渲染结果取决于浏览器实现，常见表现包括：
- 完全忽略
wrap，子项纵向堆在顶部，底部大片留白 - 设了固定
height后，子项被强制截断（尤其 Safari 和旧版 Chrome） - 即使看似分列，所有列会被拉齐到最高列高度，失去瀑布流的“错落感”
- DOM 顺序与视觉顺序严重错位，影响屏幕阅读器和 SEO
column-count 是唯一轻量、原生、靠谱的替代方案
如果你只是需要视觉上接近瀑布流的多列流式填充，column-count 是当前最可行的 CSS 方案：
- 浏览器原生支持内容按列自动填充，无需预设容器高度
- 兼容性覆盖 Chrome 50+、Firefox 52+、Safari 14.1+、IE10+
- 关键样式仅三行：
column-count: 3、column-gap: 16px、子项加break-inside: avoid - 切忌给容器加
display: flex——这会直接禁用多列渲染 - 子项宽度别设
width: 100%，改用max-width: 100%，否则会强制占满整列
真要 Flex 布局分列？必须 JS 分组 + 多层容器
所谓“Flex 瀑布流”，本质是用 JS 模拟列高平衡，再靠 CSS 布局拼接。纯 CSS 不可能做到：
- 外层用
display: flex; flex-wrap: wrap横向排列多个列容器 - 每个列容器自身是
display: flex; flex-direction: column - JS 必须维护
columnHeight数组，每次插入前找Math.min(columnHeight)对应索引 - 不能靠
index % 2静态分配——图片加载延迟、字体重排都会导致列高失衡 - 图片加载完成前高度为 0，必须监听
@load或用IntersectionObserver触发真实高度更新 - 列容器建议加
contain: layout style减少重排开销
最容易被忽略的点不在 CSS 写法，而在资源加载时机和 DOM 语义：图片异步加载导致高度突变，列高瞬间失衡；JS 分组方案下 DOM 顺序 ≠ 视觉顺序，屏幕阅读器可能跨列拼读。这些不是加个 height 或调个 flex-flow 就能绕开的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
