Flex无法实现真正的左右两列瀑布流，因其按行填充而非列式分配；纯CSS方案推荐column-count或Grid+JS，或改用双容器+JS分发的静态双列布局。
Flex 实现瀑布流左右对半分，本质是误解
直接用 flex 做「左右对半分的瀑布流」行不通——flex-wrap: wrap 是按行填充、从左到右依次排列，不是按列分组。所谓“左右两列瀑布流”，实际要的是**两列独立、各自纵向延伸、内容按列顺序填入**的效果，而 Flex 默认主轴是水平的，无法天然支持列式数据流分配。
为什么 flex-direction: column + flex-wrap: wrap 也不行
有人试过把容器设成 flex-direction: column; flex-wrap: wrap; height: 600px;，再靠 align-content: flex-start 控制换列，但问题一堆：
-
height必须写死，否则不换列；响应式场景下高度不可预知 - 内容高度差异大时，两列底部严重不对齐，视觉上“漏空”明显
- IE 和部分旧版 Safari 对
column+wrap支持极差，甚至渲染错乱 - DOM 顺序仍是线性（1→2→3→4），无法语义化表达“第1列第1项、第2列第1项”这种结构
真正能落地的左右两列瀑布流方案
如果坚持用纯 CSS（不引入 JS 库如 Masonry），只有两个靠谱路径：
-
用
column-count: 2：浏览器原生支持，按文本流自动分栏，适合文字为主、图片高度可控的内容。关键要加break-inside: avoid;防止单个卡片被劈成两半 -
用
display: grid模拟两列：通过grid-template-columns: 1fr 1fr;+grid-auto-flow: dense;+ 显式grid-row控制，但需 JS 配合计算每项应落哪一行——这已超出纯 CSS 范畴 - 放弃“纯 CSS 瀑布流”执念，改用轻量 JS 方案：Masonry（v5+ 支持 ES module）、或者仅 20 行的
column-fill逻辑（按 DOM 顺序轮询插入左/右容器）
如果非要用 Flex 强凑“左右两列”效果
只能退一步：放弃“瀑布流”的动态列高特性，改用静态双列布局（即左右各一个垂直 flex 容器），手动或 JS 分配数据：
立即学习“前端免费学习笔记（深入）”；
- HTML 结构必须拆成两个独立容器：
<div class="col-left"></div><div class="col-right"></div> - 两者都设
display: flex; flex-direction: column; gap: 12px;，靠 JS 把数组奇偶索引分别塞进左右容器 - 不能依赖
flex: 1或height: 100%去拉平两列——它们永远不同高，强行等高会破坏瀑布感 - 响应式切换时，记得把两个容器外层包一层
display: flex，小屏下改flex-direction: column即可堆叠
这个做法看似绕，但 DOM 可预测、调试直观、兼容性好——比硬拗 Flex 瀑布流更接近真实项目需求。
