纯Flex无法实现真正瀑布流，必须用column-count方案：设column-count、column-gap和break-inside: avoid，避免display: flex容器，解决图片加载抖动需预设宽高或aspect-ratio。
纯 Flex 无法实现真正瀑布流，所谓“Flex 瀑布流”只是视觉近似，必须接受列高拉齐、DOM 顺序与视觉不一致、无法响应内容高度变化等硬限制。
为什么 flex-direction: column + flex-wrap: wrap 不生效
这不是浏览器兼容问题，而是 Flexbox 规范明确未定义 column 主轴下的 flex-wrap 行为。实际表现只有三种：
- Safari 和多数 Chrome 版本直接忽略
flex-wrap，退化为单列堆叠 - 设了固定
height后，部分浏览器强制截断内容，而非换列 - 即使看似分列，所有列会被拉齐到最高项高度——本质是等高栅格，不是错落瀑布流
典型错误写法：display: flex; flex-direction: column; flex-wrap: wrap; height: 600px;，上线即翻车。
用 display: flex + flex-direction: row 模拟多列容器
这是目前唯一能在不引入 JS 的前提下，靠纯 CSS “凑出”类瀑布视觉的方案，但需严格满足三个条件：
- 外层容器必须设明确
width（不能是100%或max-width），否则列数不可控 - 每列子容器设
flex: 0 0 [宽度值]，且宽度总和 ≤ 外层容器宽；例如.col { flex: 0 0 24%; } - 每列内部用
display: flex; flex-direction: column;堆叠 item，并用gap控制间距（margin易塌陷）
缺点明显：列数固定、无法响应屏幕缩放、item 高度差异大会导致列间高度严重失衡，且 DOM 顺序是“逐列横向”，和瀑布流经典“逐项纵向填列”逻辑相反。
column-count 才是真正轻量靠谱的替代方案
别被“Flex 更灵活”的说法带偏。column-count 是浏览器原生支持的多列流式布局，它不依赖容器高度，内容自动按列填充，视觉错落感最接近瀑布流，且只需三行核心 CSS：
-
column-count: 3;（配合媒体查询做响应式：小屏1，中屏2，大屏3或4） -
column-gap: 1rem;（不能用gap，该属性对 column 布局无效） - 每个子项加
break-inside: avoid;（防止图片或卡片被截断；Safari 旧版需补-webkit-column-break-inside: avoid;）
关键避坑点：容器绝不能设 display: flex，否则直接禁用多列渲染；子项也别用 position: absolute 或 float，会破坏分列逻辑。
图片加载抖动是瀑布流崩盘主因，和 Flex 或 column 无关
几乎所有“布局错乱”，根源都不是 CSS 写错，而是图片异步加载导致高度突变：
- 初始渲染时图片高度为
0，column-count按空内容分列，加载后突然撑高，列高失衡 - 解决思路不是换布局方案，而是控制高度预期：服务端返回宽高数据、用
aspect-ratio: 4/3占位、或提前设min-height - 监听
img.addEventListener('load', ...)比window.onload更及时，避免广告脚本拖慢重排时机
复杂交互（如点击定位、拖拽排序、动态加载）下，column-count 的 DOM 顺序与视觉列顺序不一致问题会立刻暴露，此时已超出纯 CSS 能力边界，必须上 JS 分组逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
