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 对换列无意义。实际表现只有三种：
- Safari 和多数 Chrome 版本直接忽略
flex-wrap，退化为单列堆叠 - 若容器设了
height，子项会被截断或溢出，而非“跌入最短列” - 即使看似分多列，所有列会被强制拉齐到最高列高度，失去错落感
column-count 是唯一靠谱的纯 CSS 瀑布流方案
它才是浏览器原生支持“按列填满”语义的机制，三行代码即可稳定运行：
.container {
column-count: 3;
column-gap: 16px;
}
.item {
break-inside: avoid;
max-width: 100%;
}
关键点：
- 容器绝不能设
display: flex——这会直接禁用多列渲染 -
break-inside: avoid防止图片或文字被劈开（尤其含<img>时） - 用
max-width: 100%替代width: 100%，否则子项会撑满整列宽度 -
column-gap默认是1em，不重置会导致间距过大
图片加载导致布局抖动怎么办
这不是 CSS 写错，而是 DOM 渲染时机问题：图片未加载时高度为 0，column-count 按空内容分列，加载后突然撑高，列高失衡。
- 优先用
aspect-ratio: 4/3占位（现代浏览器支持） - 服务端返回宽高时，注入
data-height属性，JS 初始化时提前设min-height - 避免用
window.onload，改用img.addEventListener('load', ...) - 慎用
IntersectionObserver做懒加载——触发时高度已变，补救成本高
真要用 Flex 布局，就得配 JS 分组逻辑
所谓“Flex 瀑布流”，本质是用 JS 模拟列调度：
- 外层
display: flex; flex-wrap: wrap，内层每个列容器是display: flex; flex-direction: column - 每次插入前，必须计算各列当前总高度，把新项 push 到最短列
- 不能用
index % 3静态分配——图片加载延迟、字体重排都会立刻暴露列高失衡 - 建议给列容器加
contain: layout style减少重排开销
最常被忽略的点：不是怎么写 Flex，而是怎么让图片高度在布局前就可控。DOM 顺序 ≠ 视觉顺序，这对无障碍和滚动锚点都是硬伤。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
