flex无法实现真正的瀑布流，因其按行排列且不支持错落堆叠；所谓“flex瀑布流”只是通过多列容器或js模拟，而纯css方案应优先选用column-count或grid-template-rows: masonry。
flex不能真正实现瀑布流，别被误导
Flex布局天生按行（或列）顺序排列子项，flex-wrap: wrap 只能保证换行对齐，但无法让不同高度的卡片像 Masonry 那样错落堆叠——这是它的根本限制。所谓“flex 瀑布流”实际是视觉模拟：靠固定高度 + flex-direction: column + 多容器分栏，或借助 JS 补位。纯 CSS flex 做不到真正的 Masonry 效果。
用 display: flex + flex-direction: column 模拟三栏瀑布流
适用于卡片高度差异不大、且列数固定的场景。核心思路是把容器设为 column 方向，再用多个子容器（每列一个）各自 flex 排列：
.masonry-container {
display: flex;
flex-direction: column;
height: 600px; /* 必须设高度 */
}
.masonry-column {
flex: 1;
display: flex;
flex-direction: column;
gap: 16px;
}
@media (max-width: 768px) {
.masonry-container {
flex-direction: row;
}
.masonry-column {
flex: 1 1 50%;
}
}
- 必须给
.masonry-container设明确高度，否则 column 方向下子列无法分配空间 - 响应式切换时，
flex-direction从 column 改为 row，同时用flex: 1 1 50%实现小屏两列 - 卡片不能跨列，每张卡只能属于一个
.masonry-column，需服务端或 JS 预分配
遇到 flex-wrap: wrap 卡片高度不齐导致底部留白？
这是最常被当成“瀑布流失败”的现象：三张高卡片挤在第一行，第二行只剩一张矮卡，右侧大片空白。这不是 bug，而是 flex 的正常行为——它按行计算，不会回填空隙。
- 解决方向只有两个：放弃 flex（改用
column-count或 CSS Grid +grid-template-rows: masonry），或接受并控制留白（如统一卡片最小高度、用align-content: flex-start防止拉伸） -
align-content: flex-start很关键，否则多行时 flex 容器会默认拉伸填满高度，加剧错位感 - 若坚持用
flex-wrap，建议搭配justify-content: space-between或 JS 动态排序，但复杂度陡增
真正想用纯 CSS 做瀑布流，优先看 column-count 和 grid-template-rows: masonry
column-count 是目前兼容性最好、最接近瀑布流的纯 CSS 方案；grid-template-rows: masonry 是未来标准，但仅 Chrome 116+ 支持且需开启 flag。
-
column-count: 3下卡片会自动按高度切分进各列，支持响应式缩列为column-count: 1，但无法控制单卡跨列、不支持 gap 精确对齐 -
grid-template-rows: masonry要求父容器display: grid且只设column-gap/row-gap，不设grid-template-rows，否则失效 - 别在 flex 容器里套
column-count——它只对块级流内容生效，flex 子项会被当整体处理
真正难的不是写几行 flex，而是判断什么时候该停手换方案。Masonry 的语义本质是“内容驱动列高”，而 flex 的设计哲学是“容器驱动布局”。两者目标冲突，硬凑容易后期维护翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
