column-count实现移动端瀑布流需满足三条件：容器设max-height、子项加break-inside: avoid、图片设width: 100%；否则易单列或截断，因它是分栏排版指令而非布局指令，依赖空间限制触发。
纯 CSS 实现移动端多列瀑布流，column-count 是最轻量、兼容性最好的方案，但必须满足三个硬性条件：容器有 max-height、子项加 break-inside: avoid、图片设 width: 100%。缺一不可，否则大概率单列或截断。
为什么 column-count 在移动端经常“不生效”
不是 bug，是浏览器行为逻辑被忽略：column-count 不是布局指令，而是「分栏排版指令」——它只在容器空间受限时才触发分栏。移动端 Safari 和 Android WebView 默认把无高度容器当“无限高”，直接退化为单列。
- 没设
max-height或height：浏览器不启动分栏引擎，column-count: 2形同虚设 - 子元素没加
break-inside: avoid：卡片（尤其是含图片的）会被劈开，左半在第一列、右半掉进第二列底部 - 图片未设
width: 100%：原始尺寸撑破列宽，导致列内换行错乱，甚至整列坍缩 - iOS Safari 对
column-fill: balance基本不支持，别指望两列高度一致
column-count 的最小可用配置（含兼容补丁）
以下写法已验证兼容 iOS 14+、Android Chrome 110+、微信内置浏览器（WKWebView 内核）：
.masonry {
column-count: 2;
column-gap: 8px;
max-height: 80vh; /* 必须！不能用 min-height */
width: 100%;
}
<p>.masonry > <em> {
break-inside: avoid;
-webkit-column-break-inside: avoid; /</em> iOS Safari 必加 <em>/
margin-bottom: 8px; /</em> 列内垂直间距，别用 padding-top */
}</p><p>.masonry img {
width: 100%;
height: auto;
display: block;
}
</p>
-
column-gap建议 ≤ 16px，过大易触发单列回退（尤其小屏） - 不要给子项设
float、position: absolute或display: inline，否则脱离文档流，break-inside失效 - 微信浏览器对
-webkit-column-count仍有残留依赖，如需极致兼容可双写
响应式列数切换别只靠媒体查询改 column-count
单纯写 @media (max-width: 480px) { .masonry { column-count: 1; } } 容易导致最后一列大片留白，或文字挤成一团。更可靠的做法是优先用 column-width 让浏览器自动算列数：
.masonry {
column-width: 280px; /* 浏览器会按此宽度尽可能多塞列，最少 1 列 */
column-gap: 8px;
max-height: 80vh;
}
<p>@media (max-width: 480px) {
.masonry {
column-width: 100%; /<em> 强制单列，比 column-count: 1 更稳 </em>/
}
}
</p>
-
column-width是最小宽度，不是固定宽度；容器窄时自动降为 1 列，宽时可能出 3 列，比硬编码列数更适应设备差异 - 小屏下用
column-width: 100%比column-count: 1更可靠——后者在某些 Android WebView 中仍会尝试分栏 - 如果必须控死列数（如设计稿强制双栏），请同时约束容器最小宽度：
min-width: 320px
真正麻烦的从来不是写几行 CSS，而是图片加载完成前的高度不可知性。column-count 完全不感知 DOM 渲染后的真实高度变化，一旦图片异步加载拉高某列，视觉就会失衡。需要 JS 监听 load 后手动触发重排，比如 el.style.columnCount = el.style.columnCount，这点常被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
