flex-direction: column 不能实现瀑布流，因其子项垂直堆叠、无法回填空白，且 flex-wrap 在 column 下无效；纯 CSS 瀑布流唯一可靠方案是 columns 属性。
flex-direction: column 为什么不能直接做瀑布流
因为 flex-direction: column 下，子项是**顺序垂直堆叠**的，容器会按子项总高度自动撑开，无法让后续子项“回填”到前面列的空白位置——这和瀑布流要求的「多列错落、高度自适应、不依赖 JS 计算」本质冲突。
常见错误现象：flex-wrap: wrap + flex-direction: column + 固定容器高度，结果只有第一列有内容，其余列完全空白；或者所有子项被强行截断、溢出隐藏。
根本原因：CSS Flexbox 的 column 模式不支持跨列重排，wrap 在 column 下只会在**单列内换行**（实际无效），不是多列分布。
真正可行的 CSS 瀑布流：只能用 columns 属性
目前纯 CSS 实现瀑布流的唯一可靠方案是 columns，它原生支持多列、自动平衡高度、内容流式填充。Flex 和 Grid 都做不到这一点。
立即学习“前端免费学习笔记（深入）”；
使用场景：新闻列表、卡片墙、博客摘要等对列间高度均衡有要求，且不需要精确控制每列 DOM 顺序的展示型布局。
-
column-count或column-width二选一设置列数或列宽（推荐后者，响应式更友好） - 必须配合
column-gap控制列间距，否则默认为 1em，容易误判为内容断裂 - 子项不能设
break-inside: avoid（否则会整块跳到下一列，破坏瀑布效果） - 容器需设固定高度或 max-height，否则列会无限延展成单列
示例：
article {
columns: 3;
column-gap: 1.5rem;
height: 600px;
}
article > div {
break-inside: auto; /* 允许分页/分列 */
}flex + JS 是唯一可控的“伪瀑布流”方案
如果必须用 flex（比如要保留每列独立容器、需要 hover 动画隔离、或服务端渲染需保持 DOM 结构清晰），那就得放弃纯 CSS，用 JS 分组 + flex 布局模拟。
核心思路：把数据按列数分组，每组一个 div 列容器，再用 display: flex; flex-direction: column 堆叠；最后用 display: flex; flex-wrap: wrap 并排这些列容器。
容易踩的坑：
- 列高不一致时，
flex-wrap不会自动拉齐底部——需给列容器加align-items: flex-start避免错位 - 响应式列数变化时，JS 必须重新分组并更新 DOM，不能只改 CSS
- 滚动性能差：大量子项 + 频繁重排，建议加
contain: layout style到列容器上 - 无障碍问题：DOM 顺序 ≠ 视觉顺序，屏幕阅读器可能读出错乱序列
Grid 布局也不适合真瀑布流
有人试过 grid-template-columns: repeat(3, 1fr) + grid-auto-flow: dense，但这是“网格填充”，不是瀑布流：它按网格单元格分配，不按内容高度折行，无法实现「长卡片下坠填补短卡片空隙」的效果。
典型错误现象：第三列顶部出现大片空白，而第二列还有空间；或者卡片被强制裁剪、错位。
性能影响：Grid 的 auto-flow 在子项高度差异大时，浏览器需反复计算回填位置，比 columns 开销高得多，尤其在 Safari 中明显卡顿。
结论很实在：想用 CSS 做瀑布流，就老实用 columns；想用 flex 或 grid，就得接受它不是瀑布流，或者准备好写 JS。
