flex布局无法实现真瀑布流，因flex-direction: column与flex-wrap: wrap组合被规范禁止；可行方案是row wrap配合calc()模拟视觉错落，或column-count实现原生分栏，真瀑布流必须依赖js动态分配列。
Flex布局本身不能实现真瀑布流
直接说结论：flex-direction: column; flex-wrap: wrap 在所有主流浏览器中都不起作用——它会被忽略，或退化为单列纵向排列，甚至导致子项被截断。这不是你写错了，是 Flexbox 规范明确限制了这种组合的行为。所谓“Flex 实现瀑布流”，本质是用 flex-direction: row; flex-wrap: wrap 模拟出视觉错落感，而非算法级的“填最短列”。
用 row wrap + calc() 控制列宽是唯一稳定方案
这是目前兼容性最好、无需 JS 也能跑通的“伪瀑布流”做法，核心是让每行尽可能塞满，靠高度差异制造参差效果。
-
display: flex+flex-wrap: wrap必须设在容器上 - 每个子项宽度用
width: calc(33.333% - 12px)这类表达式固定（减去 gap 或 margin） - 必须设
gap或统一margin，否则列间距不可控 - 子项高度可以不一致，但 DOM 顺序仍是左→右、上→下，不是按列高动态分配
- 响应式时需配合媒体查询重算
calc()值，比如从 3 列切到 2 列
JS 配合 Flex 容器做列模拟才接近真瀑布流
如果你需要“新卡片自动插进最短列底部”这种行为（比如无限滚动加载），就必须用 JS 管理列数组，再把卡片 append 到对应列容器里——这时 Flex 只负责每列内部的垂直堆叠，不是跨列调度。
- 维护一个列数组，如
columns = [[], [], []]，记录每列当前总高度 - 每次新增卡片前，调用
Math.min(...heights)找最短列索引 - 把卡片
appendChild到对应列的 DOM 容器中，而不是主容器 - 列容器自身设
display: flex; flex-direction: column; gap: 10px - 主容器设
display: flex; gap: 10px，让各列并排——这才是 Flex 的合理用法
column-count 是更轻量的替代选择
如果内容是纯文本或等宽卡片，column-count 加 break-inside: avoid 比 Flex 方案更简单、更原生，且天然支持响应式列数调整。
- 不需要 JS 计算，浏览器原生分栏
- 必须加
break-inside: avoid，否则卡片可能被硬生生劈成两半显示 - 无法控制某张卡片具体落在哪一列，也不支持拖拽重排
- 列宽由容器宽度和列数自动均分，不能像 Flex 那样用
flex-grow动态拉伸
真正难的不是写几行 CSS，而是判断你的场景到底需要“视觉错落”还是“逻辑分发”——前者用 row wrap + calc() 或 column-count 就够了；后者绕不开 JS 维护列状态。别被“Flex 瀑布流”这类标题误导，浏览器没给你这个能力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
