纯 CSS Flex 布局无法实现真正瀑布流，仅能通过 flex-wrap: wrap 实现视觉错位的类瀑布流；flex-direction: column + flex-wrap: wrap 因规范限制无效；唯一稳定方案是 flex-wrap: wrap 配合百分比宽度与 gap 控制列数。
纯 CSS Flex 布局无法实现真正意义上的瀑布流（即按列高动态填充最短列），但能用 flex-wrap: wrap 实现视觉上错位的“类瀑布流”效果——本质是响应式等宽网格，不是 Masonry 布局。
为什么 flex-direction: column + flex-wrap: wrap 不行
这不是写法问题，是 Flexbox 规范硬限制：当主轴为 column 时，flex-wrap 对换列无定义行为。浏览器实际表现包括：
- 直接忽略
flex-wrap，退化为单列纵向堆叠 - 设了
height后，子项被截断（尤其 Safari 和旧版 Chrome） - 即使渲染出多列，所有列会被拉齐到最高列高度，失去错落感
- DOM 顺序与视觉顺序错位，影响屏幕阅读器和 SEO
用 flex-wrap: wrap + 百分比宽度做错位网格
这是唯一稳定、无需 JS 的纯 CSS 方案，适用于图片卡片、商品列表等场景。关键在控制每项宽度+换行：
- 容器必须设
display: flex和flex-wrap: wrap - 子项用
width: calc(33.333% - 12px)类似方式控制列数，避免四舍五入导致最后一项换行异常 - 用
gap替代margin更可靠（IE 不支持，需 fallback） - 高度不一致时自然形成错位，但 DOM 顺序仍是左→右、上→下
示例：.container { display: flex; flex-wrap: wrap; gap: 16px; } .item { width: calc(50% - 8px); } —— 手机端两列，高度不同就自然错开。
响应式列数切换靠媒体查询
不同屏幕宽度下调整子项宽度，就能改变每行列数：
- 桌面（≥1024px）：
width: calc(25% - 12px)→ 4 列 - 平板（768px–1023px）：
width: calc(33.333% - 12px)→ 3 列 - 手机（width: 100% 或
width: calc(50% - 8px)→ 1 或 2 列
注意：百分比计算要扣掉 gap 或 margin 总和，否则可能意外换行。
真瀑布流必须用 JS 或 column-count
如果业务要求“填最短列”，就绕不开 JS 分组或 column-count：
-
column-count是轻量原生方案：只需三行样式（column-count: 3、column-gap: 16px、子项加break-inside: avoid），但无法控制 item 落在哪一列，且不能设容器高度 - JS 方案必须监听图片
load或用IntersectionObserver，否则初始高度为 0，列高误判导致塌陷 - 切忌给
column-count容器加display: flex—— 这会直接禁用多列渲染
最容易被忽略的不是 CSS 写法，而是图片加载时机：没占位、没预设宽高比、没等 load 就插入 DOM，瀑布流立刻崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
