column-count是唯一靠谱的纯CSS瀑布流方案，需设column-count、column-gap、break-inside: avoid三属性，容器禁用flex，子项禁脱离文档流，图片需预设尺寸防抖动。
Flexbox 本身无法实现真正瀑布流——所谓“Flex 瀑布流”要么是等宽响应式网格，要么依赖 JS 模拟列调度。如果你想要纯 CSS、开箱即用、浏览器原生支持的瀑布流效果，column-count 才是唯一靠谱方案。
为什么 flex-direction: column + flex-wrap: wrap 不工作
这不是你写错了，是 Flexbox 规范明确不支持 column 主轴下的换列行为。实际表现通常是：
- Chrome/Safari 直接忽略
flex-wrap，子项堆成单列 - 设了固定
height后，内容被截断或溢出容器 - 即使看似分列，所有列会被强制拉齐到最高列高度，失去错落感
典型失效代码：display: flex; flex-direction: column; flex-wrap: wrap; height: 600px; —— 这段在绝大多数现代浏览器里都不可靠。
用 flex-wrap: wrap 能做什么（别混淆）
它只能稳定实现「等宽换行网格」，适合卡片类内容，但不是瀑布流：
立即学习“前端免费学习笔记（深入）”；
-
display: flex; flex-wrap: wrap;+width: calc(33.333% - 12px)可做 3 列响应式布局 - 高度不一致时视觉上有“错落”，但 DOM 顺序仍是左→右、上→下，不是列优先填充
- 图片加载延迟、文字重排会导致列高失衡，无法自动补位到最短列
示例关键样式：.container { display: flex; flex-wrap: wrap; gap: 16px; }，.item { width: calc(33.333% - 12px); }
真瀑布流必须用 column-count（三行起步）
这是浏览器原生支持、无需 JS、语义正确、兼容性最好的方案：
- 容器加
column-count: 3; column-gap: 16px;，内容自动从上到下、从左到右分列 - 每个子项必须加
break-inside: avoid;，否则图文混排时可能被劈开 - 容器绝不能设
display: flex，否则直接禁用多列渲染 - 图片需预设尺寸：用
aspect-ratio占位，或服务端注入data-height防抖动
关键点不在怎么写 Flex，而在于接受一个事实：Flexbox 的设计目标不是瀑布流，它的主轴换行逻辑只对 row 有效。
