Flexbox 不支持真正瀑布流，因其 column 方向的 flex-wrap 无效且列等高；CSS Columns 是轻量方案，兼容性好但不支持跨列对齐；Grid + JS 补位可实现底边对齐，需处理图片加载与重排性能。
Flexbox 本身不支持真正的瀑布流
用 display: flex 搭配 flex-direction: column 和 flex-wrap: wrap 看起来像瀑布流，但实际是「列等高后填满」——所有列高度被拉平到最高一列，内容不会自然“跌落”到最短列。这是 Flexbox 的设计逻辑决定的，不是写法错了。
- 常见错误现象：
flex-wrap: wrap在column方向下几乎无效，浏览器会忽略或降级处理 - 使用场景：适合做固定行数/列数的网格（如商品卡片横排三列），不适合内容高度差异大的瀑布流（如小红书、Pinterest 风格）
- 参数差异：
align-content: flex-start对column + wrap无实质影响；height必须显式设置容器高度，否则无法触发换列
用 CSS Columns 实现轻量瀑布流更靠谱
CSS 多列布局（columns）是浏览器原生支持瀑布流的方案，语义清晰、代码少、兼容性好（Chrome 50+、Firefox 52+、Safari 14.1+）。
- 实操建议：给容器设
columns: 3或column-count: 3，子项用break-inside: avoid防止单个卡片被断开 - 性能影响：比 JS 方案快得多，不触发重排，但不支持跨列对齐（比如所有图片底边不对齐）
- 容易踩的坑：
column-gap默认有值（1em），不重置会导致列间距过大；width设为100%的子项在多列中会强制占满整列宽度，应改用max-width: 100%
article {
columns: 3;
column-gap: 16px;
}
article > div {
break-inside: avoid;
max-width: 100%;
}
Grid 布局 + JavaScript 补位是折中选择
纯 CSS Grid 无法自动分配高度不一的子项到最短列，但可以用 grid-template-rows: masonry（实验性，仅 Firefox 119+ 支持）。目前更可行的是：用 Grid 划分列结构，再用 JS 计算每列当前高度，把下一项插入最短列。
- 使用场景：需要底边对齐、或必须兼容老版本 Chrome/Safari 时
- 关键点：避免高频重排——缓存列高、用
getBoundingClientRect()替代offsetHeight，只在 DOM 插入后批量计算 - 兼容性影响：CSS
masonry值目前仅 Firefox 支持，其他浏览器会回退到grid默认行为（等高行），需加@supports判断
别忽略图片加载导致的布局错乱
瀑布流里图片异步加载，高度变化会撑开列、破坏排列。这不是 Flexbox 或 Grid 的问题，而是资源加载时机问题。
立即学习“前端免费学习笔记（深入）”；
- 实操建议：给图片设固定宽高比容器（如
aspect-ratio: 3/4），或用img { display: block; width: 100%; height: auto; }+ 占位背景色 - 容易踩的坑：用
loading="lazy"时，首屏外图片加载延迟可能让 JS 补位逻辑误判列高；建议配合IntersectionObserver延迟补位 - 性能提示：不要在
img.onload里立刻重排，合并多次加载事件，节流处理
columns 就够用；如果业务强依赖底边对齐或动态排序，就得接受 JS 参与，且必须处理好加载态和重排节奏。 
