Pinterest瀑布流不能用Flex实现，因其flex-wrap按行换行且强制等高；真瀑布流需用CSS Columns（column-count/column-width+break-inside:avoid）或JS库如Masonry。
Flex本身不支持Pinterest瀑布流，别硬套
直接用 display: flex 实现真正的 Pinterest 风格（每列高度独立、内容错落排列）是不可能的。Flex 的 flex-wrap: wrap 是按行换行的，所有卡片在**同一行内强制等高**——这恰恰是 Pinterest 要避免的效果。你看到的“伪瀑布流”往往是 Flex + JS 计算位置，或干脆误用了 Grid。真瀑布流必须靠 column-count 或 JS（如 Masonry）驱动。
用 CSS Columns 实现纯 CSS 瀑布流（无 JS）
这是目前最轻量、兼容性足够（Chrome 50+/Firefox 50+/Safari 14.1+）的原生方案。核心是让容器变成多列流式布局，内容自然按列填充：
-
column-count控制列数（如column-count: 3），或用column-width让浏览器自适应（如column-width: 280px） - 卡片必须设
break-inside: avoid，否则长卡片会被劈成两段跨列显示 - 列间距用
column-gap，不是gap；列边框/背景需加在子项上，父容器无法直接控制单列样式 - 不支持
justify-content或垂直对齐，卡片顶部始终对齐，无法居中
.pinterest-container {
column-count: 3;
column-gap: 1rem;
}
.pinterest-card {
break-inside: avoid;
margin-bottom: 1rem; /* 列内卡片间距 */
}Flex + align-items: stretch 适合等高卡片，不是瀑布流
如果你实际要的是「同一行内卡片自动拉伸到最高卡片的高度」（比如产品列表、仪表盘卡片组），这才是 Flex 的主场：
- 父容器设
display: flex; flex-wrap: wrap; gap: 1rem - 每个卡片用
flex: 1 1 calc(33.333% - 1rem)控制基础宽度，配合min-width做响应式兜底 - 确保卡片内部不设
height、max-height，也不用position: absolute把内容抽离文档流 - 如果某张卡片意外变矮，大概率是图片没设
max-width: 100%; height: auto，或子元素用了float
真正需要 Pinterest 效果时，优先选 CSS Grid 或 JS 库
Grid 的 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) + grid-auto-flow: dense 能模拟部分瀑布感，但依然无法动态错落。生产环境建议：
立即学习“前端免费学习笔记（深入）”；
- 小项目：用
masonry（Chrome 116+ 原生支持，display: grid; grid-template-rows: masonry;） - 兼容老浏览器：引入
css-masonry-polyfill或轻量库如vanilla-masonry - React 项目：直接用
react-masonry-css，它只管定位，样式仍走 CSS，不污染 DOM 结构
别在 Flex 上反复调试“为什么卡片不错开”——方向错了。瀑布流的本质是列式流布局，不是弹性盒子的交叉轴对齐问题。
