column-width配合column-gap是移动端瀑布流列数自适应最直接有效的方案：column-width设240px～280px作为最小期望宽度，column-gap设12px或0.75rem，禁用column-count，配break-inside: avoid和img{display:block}防截断与错位。
用 column-width 配合 column-gap 实现真自适应，别写 column-count
移动端瀑布流列数自适应，最直接有效的方案就是靠 column-width——它不是固定列宽，而是“最小期望宽度”，浏览器会根据容器实时宽度自动试算最多能塞几列，并反推每列实际宽度。写死 column-count: 3 在手机上必然挤成窄条，在小屏下甚至可能只剩半列空白。
关键实操点：
-
column-width值建议设为240px～280px：兼顾手指点击热区与内容可读性，太小（如180px）易导致单列过窄、文字折行混乱 - 必须配
column-gap: 12px或column-gap: 0.75rem：gap 为 0 时，某些安卓 WebView 会强制退化为单列 - 禁用
column-count：两者同时存在时行为不可控，resize 过程中容易闪动或错列 - 父容器需有明确宽度（如
width: 100%或max-width: 100%），不能是display: inline-block或未设宽的 flex 子项
子项必须加 break-inside: avoid 和 page-break-inside: avoid
卡片被截成两半，是移动端瀑布流最常翻车的地方——尤其在 iOS Safari 和部分安卓 WebView 中。根本原因是浏览器默认允许块级元素跨列分页，而图片、带 padding 的 div 等天然满足“可分页”条件。
正确写法（每个子项都加）：
立即学习“前端免费学习笔记（深入）”；
.masonry-item {
break-inside: avoid;
page-break-inside: avoid;
-webkit-column-break-inside: avoid; /* 保 Safari 14.1 以下 */
}注意：
- 子项不能是
inline-block、float或position: absolute，否则脱离文档流，break-inside失效 - 如果子项内部用了
position: absolute，得在外层包一层干净的div并把break-inside加在这层上 - 别给子项设固定高度（如
height: 200px），否则列高均衡会被破坏
图片要设 display: block，避免底部空白撑高列
瀑布流里子项含 img 时，如果不处理，默认 img 是 inline 元素，会在底部留出约 4px 的空白（baseline 对齐导致）。这个空白会被计入列高，造成某列莫名比其他列高一截，视觉错乱。
解决很简单：
.masonry-item img {
display: block;
width: 100%;
height: auto;
}其他要点：
- 如果图片用
object-fit: cover，确保父容器有明确宽高约束，否则在 resize 时可能触发重排抖动 - 避免在子项里用
margin-bottom模拟间距——它会干扰列内高度计算；统一用column-gap控制列间、用row-gap（不支持）或 padding 替代 - 不要依赖
calc(100% / 3)或 CSS 变量动态算列数，移动端小数精度误差 + 渲染时机差异会让结果不可控
小屏下仍需媒体查询兜底，Safari 对 column-width 支持有断层
column-width 在 Chrome/Firefox 中表现稳定，但 Safari 直到 15.4 才完全修复其在 flex 容器内的兼容问题；更早版本（尤其是 iOS 14.x）在容器宽 250px 时可能直接忽略该声明，退化为单列且无间隙。
稳妥做法是加一层最小宽度兜底：
@media (max-width: 480px) {
.masonry-container {
column-width: 100%;
column-gap: 0;
}
}这能确保极端窄屏下至少保持内容可读，而不是出现空白列或错位。另外，若项目需兼容微信内置浏览器（X5 内核），建议额外测试 column-fill: auto 是否显式声明——X5 对隐式值支持不稳定。
真正难的不是怎么写，而是记住：列数自适应 ≠ 完全甩给浏览器；column-width 是核心，但 break-inside、图片对齐、Safari 版本差异，三者漏一个，瀑布就断流。
