不能用 CSS Flex 实现真正瀑布流，因 flex-direction: column + flex-wrap: wrap 未被规范定义，各浏览器表现不一且不可靠；推荐 column-count 多列布局或 JS 分组方案。
不能用 CSS Flex 实现真正瀑布流——flex-direction: column + flex-wrap: wrap 在所有主流浏览器中都不按预期工作，这不是兼容性问题，而是 Flexbox 规范明确未定义该组合的行为。
为什么 flex-direction: column + flex-wrap: wrap 会失效
浏览器实际表现只有三种：Safari 和旧版 Chrome 直接忽略 flex-wrap，退化为单列堆叠；设了 height 后内容被截断或溢出；即使看似分列，所有列也会被强制拉齐到最高列高度，完全失去错落感。
典型错误写法：display: flex; flex-direction: column; flex-wrap: wrap; height: 600px; —— 这段代码在 Chrome、Firefox、Safari 中均不可靠。
- 规范层面不支持：Flexbox 只在主轴为
row时定义换行逻辑 - DOM 顺序 ≠ 视觉顺序：屏幕阅读器和 SEO 会按源码顺序读取，跨列拼接导致语义混乱
- 无法响应图片加载：初始高度为 0，列高误判后布局塌陷，且无原生机制修复
想用 Flex 做“类瀑布流”？只能走 flex-wrap: wrap 横向网格路线
这是唯一稳定、无需 JS 的纯 CSS 方案，本质是等宽响应式网格，视觉上因高度不一产生错位，但不是 Masonry。
立即学习“前端免费学习笔记（深入）”；
- 容器必须设
display: flex和flex-wrap: wrap，不能用column - 子项宽度用
width: calc(33.333% - 12px)控制列数（注意扣掉gap或margin） - 用
gap替代margin更可靠；IE 不支持gap需 fallback - 响应式靠媒体查询切换宽度：桌面
calc(25% - 12px)（4 列），手机calc(50% - 8px)（2 列）
真要填最短列？别硬套 Flex，改用 column-count
这是目前唯一无需 JS、浏览器原生支持、语义正确、兼容性好（Chrome 50+、Firefox 52+、Safari 14.1+、IE10+）的方案。
- 三行核心样式：
column-count: 3、column-gap: 16px、子项加break-inside: avoid - 容器绝不能设
display: flex——否则直接禁用多列渲染 - 子项用
max-width: 100%替代width: 100%，否则会撑满整列宽度 - 图片必须预设尺寸：用
aspect-ratio占位，或服务端返回宽高注入data-height属性
JS 分组方案才是 Flex “真瀑布流”的唯一路径
如果你必须用 Flex 容器、又要求严格填最短列、支持动态插入和滚动锚点，就得放弃纯 CSS，进入 JS 层控制。
- 外层
display: flex; flex-wrap: wrap排列多个列容器，每个列容器自身是display: flex; flex-direction: column - 必须维护
columnHeights数组，每次插入前查Math.min(columnHeights)对应索引 - 不能用
index % 2静态分配——图片加载延迟、字体重排都会立刻暴露列高失衡 - 必须监听
img.load或用IntersectionObserver更新真实高度，否则初始高度为 0 导致塌陷 - 列容器建议加
contain: layout style减少重排开销
最容易被忽略的不是怎么写 Flex，而是图片高度在布局前是否可控——没占位、没预设、没监听，再好的 JS 逻辑也会在首屏崩掉。
