如何用CSS Flex实现瀑布流布局，是否合适？

flex-direction: column + flex-wrap: wrap 无法实现真正瀑布流，因 Flexbox 规范未定义主轴为 column 时的换列行为；column-count 是唯一原生支持的纯 CSS 方案，需禁用 display: flex 并配合 break-inside: avoid 和 max-width: 100%。

flex-direction: column + flex-wrap: wrap 不能实现真正瀑布流——这不是兼容性问题，是 Flexbox 规范本身不支持该组合。

为什么 flex-direction: column + flex-wrap: wrap 不工作

浏览器不是“没实现”，而是规范明确不定义这种行为：当主轴为 column 时，flex-wrap 对换列无意义。实际表现只有三种：

1. Safari 和多数 Chrome 版本直接忽略 flex-wrap，退化为单列堆叠
2. 若容器设了 height，子项会被截断或溢出，而非“跌入最短列”
3. 即使看似分多列，所有列会被强制拉齐到最高列高度，失去错落感

column-count 是唯一靠谱的纯 CSS 瀑布流方案

它才是浏览器原生支持“按列填满”语义的机制，三行代码即可稳定运行：

.container {column-count: 3;column-gap: 16px;}.item {break-inside: avoid;max-width: 100%;}

关键点：

1. 容器绝不能设 display: flex——这会直接禁用多列渲染
2. break-inside: avoid 防止图片或文字被劈开（尤其含 <img> 时）
3. 用 max-width: 100% 替代 width: 100%，否则子项会撑满整列宽度
4. column-gap 默认是 1em，不重置会导致间距过大

图片加载导致布局抖动怎么办

这不是 CSS 写错，而是 DOM 渲染时机问题：图片未加载时高度为 0，column-count 按空内容分列，加载后突然撑高，列高失衡。

1. 优先用 aspect-ratio: 4/3 占位（现代浏览器支持）
2. 服务端返回宽高时，注入 data-height 属性，JS 初始化时提前设 min-height
3. 避免用 window.onload，改用 img.addEventListener('load', ...)
4. 慎用 IntersectionObserver 做懒加载——触发时高度已变，补救成本高

真要用 Flex 布局，就得配 JS 分组逻辑

所谓“Flex 瀑布流”，本质是用 JS 模拟列调度：

1. 外层 display: flex; flex-wrap: wrap，内层每个列容器是 display: flex; flex-direction: column
2. 每次插入前，必须计算各列当前总高度，把新项 push 到最短列
3. 不能用 index % 3 静态分配——图片加载延迟、字体重排都会立刻暴露列高失衡
4. 建议给列容器加 contain: layout style 减少重排开销

最常被忽略的点：不是怎么写 Flex，而是怎么让图片高度在布局前就可控。DOM 顺序 ≠ 视觉顺序，这对无障碍和滚动锚点都是硬伤。