Flex无法真正实现瀑布流，因column方向的flex-wrap需固定容器高度且列高不由内容撑开；column-count更接近需求，但DOM顺序与视觉列顺序不一致，复杂交互需JS或Masonry方案。
Flex实现瀑布流的本质限制
纯flex无法真正实现传统意义上的瀑布流（即多列高度不均、item按列顺序依次填充）。flex-direction: column配合flex-wrap: wrap看似可行，但浏览器实际渲染时会先填满第一列再换第二列，而**列高由容器高度决定，不是由内容自动撑开**——这意味着你必须提前知道容器高度，且无法响应内容变化。
常见错误现象：flex-wrap: wrap在column方向下完全不生效，或所有item挤在第一列底部，其余列空白。
使用场景仅限于：容器高度固定、item数量可控、允许截断或留白的展示页（如后台管理侧边栏图标网格）。
用display: flex + flex-direction: column勉强模拟的条件
真要用Flex“凑”出类瀑布效果，必须满足三个硬性条件：
立即学习“前端免费学习笔记（深入）”；
- 容器设置明确的
height（不能是min-height或auto） - 子项
flex-basis设为固定值（如flex: 0 0 200px），不能依赖内容高度 - 启用
flex-wrap: wrap且父容器width足够容纳多列（列数 =floor(容器宽度 / 单项最小宽度)）
示例代码：
.waterfall {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 600px; /* 必须写死 */
width: 800px;
}
<p>.waterfall > <em> {
flex: 0 0 220px; /</em> 高度固定，否则失效 */
width: 200px;
margin: 10px;
}注意：flex-basis设为auto或不设，会导致所有item堆在第一列；容器height用vh单位时，窗口缩放可能触发重排错乱。
为什么column-count比Flex更接近瀑布流需求
真正解决“内容自动分列、按列流式填充”的，是CSS多列布局：column-count或column-width。它天然支持内容驱动的高度增长，无需预设容器高度，兼容性也覆盖到IE10+。
与Flex方案对比的关键差异：
-
column-count: 3→ 浏览器自动把内容切成3列，每列高度随最长项延伸 - item顺序是**文档流顺序**（从上到下、从左到右），不是瀑布流经典“填完第一列再填第二列”的逻辑，但视觉效果最接近
- 不支持item跨列，但可通过
break-inside: avoid防止被切断 - 性能更好：浏览器原生优化，无JS干预必要
典型错误：给column-count容器设display: flex，这会直接禁用多列渲染。
复杂点在于响应式与交互边界
当需要点击展开、拖拽排序、动态加载更多时，column-count会暴露本质问题：DOM顺序 ≠ 视觉列顺序，JS获取offsetTop或做位置计算极易出错。此时必须放弃纯CSS，改用Masonry布局库（如CSS container-query + grid + JS补位）或服务端分组后按列输出HTML。
容易被忽略的一点：移动端小屏下column-count: 3可能让单列过窄，文字折行混乱，必须配合@media重置column-count，且column-gap不能设为百分比值（部分安卓浏览器不支持）。
