Flexbox 无法实现真正的瀑布流，仅能模拟视觉近似；纯 CSS 下 column-count 是唯一可靠方案；真 Masonry 必须依赖 JS 动态列高调度。
Flexbox 本身不能实现真正的瀑布流（Masonry）效果，所谓“Flex 瀑布流”只是视觉近似，且必须接受列高不一致、内容顺序错乱、语义断裂等代价。真要列高动态平衡，得靠 JS；纯 CSS 场景下，column-count 才是唯一可靠方案。
为什么 flex-direction: column; flex-wrap: wrap 不 work
这不是浏览器兼容问题，而是 Flexbox 规范明确禁止在 column 主轴上做 wrap 分列：浏览器实际行为只有三种——Safari/旧 Chrome 忽略 flex-wrap，退化为单列堆叠；设了固定 height 后部分浏览器强制截断；即使看似分列，所有列会被拉齐到最高列高度，变成等高栅格，完全不是瀑布流。
-
flex-wrap: wrap只在主轴方向溢出时触发换行，column 主轴是垂直的，“换行”意味着新开一列，但规范没定义这个行为 - 你看到的“多列”，其实是浏览器自行解释或降级渲染，不可控、不跨浏览器一致
- 用
align-content: flex-start或space-between都无法改变列高对齐逻辑
用 Flex 模拟“伪瀑布流”的可行做法
前提是接受“横向优先填满，再换行”+“列高不均”+“DOM 顺序 ≠ 视觉顺序”的事实。典型场景是图库列表、商品卡片墙，不要求语义正确性。
- 容器设
display: flex; flex-wrap: wrap; gap: 12px; - 每个子项设固定宽度 +
flex: 0 0 calc(33.333% - 12px);（三列为例），并加min-width: 240px;防止过窄 - 避免用
flex: 1，它会让子项强行撑满剩余空间，破坏列宽一致性 - 图片务必预设尺寸或用
aspect-ratio占位，否则加载前高度为 0，导致换行错乱
column-count 是纯 CSS 下唯一靠谱方案
它原生支持内容按列自动填充，不依赖容器高度，也不需要 JS 干预列分配。关键就三行：
.masonry {
column-count: 3;
column-gap: 16px;
}
.masonry-item {
break-inside: avoid;
max-width: 100%;
}
- 容器绝不能加
display: flex，否则直接禁用多列渲染 -
break-inside: avoid防止子项被截断跨列（注意 Safari 仍需break-inside: avoid-column） -
max-width: 100%替代width: 100%，否则图片会撑满整列宽度，变形或溢出 - 响应式可配合媒体查询切换
column-count，比如@media (max-width: 768px) { column-count: 1; }
真正需要 Masonry 效果时，JS 是绕不开的
所谓“Flex 瀑布流”本质是用 JS 模拟列调度：外层 display: flex; flex-wrap: wrap 横向排列多个列容器，每个列容器自身是 display: flex; flex-direction: column。
- 必须维护一个
columnHeights数组，每次插入前找Math.min(columnHeights)对应索引 - 不能用
index % 2静态分配——图片加载延迟、字体重排都会立刻暴露列高失衡 - 图片加载完成前高度为 0，必须监听
load事件或用IntersectionObserver触发真实高度更新 - 最常被忽略的点：不是怎么写 Flex，而是怎么让图片高度在布局前就可控
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
