Flex布局无法可靠实现Masonry瀑布流，因规范未定义column方向的换列行为；Chrome/Edge退化为单列，Safari列高强制拉齐；JS分组方案代价高且语义混乱；column-count是更现实的替代方案；真正Masonry仅Chrome 125+支持grid-template-rows: masonry。
Flex布局根本无法可靠模拟Masonry瀑布流效果——这不是写法问题，而是规范层面的硬性限制。
flex-direction: column + flex-wrap: wrap 为什么无效
浏览器根本不按你期望的方式处理这个组合。Flexbox规范明确未定义主轴为column时的换列行为，实际表现取决于引擎：
- Chrome/Edge：忽略
flex-wrap，退化为单列堆叠 - Safari：容器设了
height后，子项被截断或溢出，且所有列强行拉齐到最高项高度 - 即使渲染出多列，视觉上仍是“栅栏式”而非错落感——因为Flex不支持“最短列优先”插入逻辑
所谓“JS分组+多column Flex”真能跑通吗
能，但代价高、细节多，不是开箱即用的方案：
- 必须提前确定列数（如两列），不能响应式动态调整列数
-
columnHeight数组需实时维护，每次插入前调用Math.min(columnHeight)找目标列 - 图片加载完成前高度为0，
offsetHeight读不到真实值——必须监听@load事件或用IntersectionObserver触发重算 - DOM顺序 ≠ 视觉顺序，屏幕阅读器会按列拼接读取，语义混乱风险高
- 列容器建议加
contain: layout style减少重排开销，否则滚动时卡顿明显
column-count 是更现实的替代方案
它不是“伪瀑布流”，而是原生多列流式填充，兼容性与语义都优于Flex模拟：
立即学习“前端免费学习笔记（深入）”；
- 不用写JS，三行CSS就能起效：
column-count: 3、column-gap: 12px、子项加break-inside: avoid - 切忌给容器加
display: flex——这会直接禁用多列渲染 - 子项别设
width: 100%，改用max-width: 100%，否则强制占满整列导致错位 - 图片加载跳动问题必须靠
aspect-ratio或预设宽高比容器缓解，否则列高瞬间失衡
真正需要Masonry语义（最短列优先、DOM顺序=视觉顺序、底边对齐）时，目前只有grid-template-rows: masonry能解，但截至2026年6月，仅Chrome 125+支持且需display: grid + grid-template-rows: masonry + grid-auto-flow: column三者缺一不可；其余场景，老实用column-count，别在Flex上硬扛。
