flex-flow: column wrap 在绝大多数浏览器中不工作，因规范未定义 column 主轴下的换列行为，实际表现为忽略 wrap、内容堆叠或溢出；可靠方案是 column-count 或外层 wrap + 内层 column 的 js 分组布局。
flex-flow: column wrap 在绝大多数浏览器中**不工作**，不是你写错了，是规范和实现层面的硬限制。
为什么 flex-direction: column + flex-wrap: wrap 会失效
Flexbox 规范明确：当主轴为 column 时，flex-wrap 对“换列”无定义行为。浏览器实际处理方式包括：
- 直接忽略
wrap，退化为单列纵向堆叠 - 若容器设了
height，子项会被截断或溢出（尤其在 Safari 和旧版 Chrome） - 即使渲染出多列，所有列也会被强制拉齐到最高列高度，失去“错落”感
典型错误现象：display: flex; flex-direction: column; flex-wrap: wrap; height: 600px; 写完后，内容堆在顶部、底部大片留白，或直接撑破容器。
所谓“Flex 瀑布流”其实是伪方案：用 JS 分组 + 多列 flex-direction: column
真正能跑通的路径是：外层 display: flex; flex-wrap: wrap 横向排列多个列容器，每个列容器自身是 display: flex; flex-direction: column。
- 列数必须提前确定（如两列），JS 需维护一个
columnHeight数组，每次插入新项前找Math.min(columnHeight)对应的索引 - 不能靠
index % 2静态分配——图片加载延迟、字体重排都会导致列高失衡 - 图片加载完成前高度为
0，必须监听@load或用IntersectionObserver触发真实高度更新 - 列容器建议加
contain: layout style减少重排开销
column-count 才是轻量、原生、靠谱的替代方案
如果你只是想要视觉上接近瀑布流的效果，column-count 是更合理的选择：
- 浏览器原生支持内容按列流式填充，无需固定容器高度
- 兼容性好（Chrome 50+、Firefox 52+、Safari 14.1+，IE10+ 也支持基础特性）
- 关键样式只有三行：
column-count: 3、column-gap: 16px、子项加break-inside: avoid - 切忌给容器加
display: flex—— 这会直接禁用多列渲染 - 子项宽度别设
width: 100%，改用max-width: 100%，否则会强制占满整列
容易被忽略的细节：图片加载与无障碍
瀑布流布局最常崩的点不在 CSS，而在资源加载时机和 DOM 顺序：
- 图片异步加载导致高度突变，列高瞬间失衡——必须用
aspect-ratio占位或预设宽高比容器 - JS 分组方案下，DOM 顺序 ≠ 视觉顺序，屏幕阅读器可能按列拼接读取，造成语义混乱
-
column-count方案虽语义正确（文档流顺序），但无法控制 item 落在哪一列，也不支持底边对齐
真要严格对齐底边或响应式列数动态变化，就得接受 JS 干预不可避免——纯 CSS Flex 的“瀑布流”本质是误导性说法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
