纯CSS Flex无法实现真正瀑布流，仅能通过flex-wrap: wrap配合百分比宽度实现视觉错位的类瀑布流；flex-direction: column + flex-wrap: wrap因规范限制无效，浏览器会忽略换列、单列堆叠或强制等高。
纯 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; }<br>.item { width: calc(50% - 8px); }
——手机端两列，高度不同就自然错开。
响应式列数切换靠媒体查询
不同屏幕宽度下调整子项宽度，就能改变每行列数：
- 平板（768px–1023px）：三列 →
width: calc(33.333% - 12px) - 手机（≤767px）：一或两列 →
width: 100%或width: calc(50% - 8px) - 注意：百分比计算要扣掉
gap或margin总和，否则可能意外换行
真瀑布流必须用 JS 或 column-count；如果业务要求“填最短列”，就绕不开 JS 分组或 column-count: 3 + break-inside: avoid，但后者无法控制 item 落在哪一列，且不能设容器高度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
