gap是移动端图片列表首选，因其只作用于子项间、不干扰边缘与盒模型，配合flex-wrap: wrap可稳定控制换行行列间距，且不受margin叠加、数量变化或缩放失衡影响。
移动端流式布局中不存在“等比间距”这个标准概念——间距是固定值或相对单位，无法像宽高比那样按比例缩放。你要的其实是「在流式容器内，让元素之间保持视觉上均匀、稳定、不随屏幕拉伸变形的间距」，核心靠 gap 或 justify-content，而不是比例计算。
为什么不能用百分比或 calc 做“等比间距”
间距不是容器尺寸的一部分，它不参与盒模型的比例计算。写 margin: 5% 看似“等比”，但实际效果极不稳定：小屏下可能只有 2px，大屏下变成 40px，完全破坏设计节奏；calc(100% / 20) 这类写法语法错误，CSS 不支持除法用于长度单位。
- 百分比 margin 只相对于父容器 width 计算，和高度无关，且在 flex/grid 中行为不一致
- flex 的
space-between等值分配的是剩余空间，不是“间距本身”，首尾无边距 - 试图用
padding-bottom技巧模拟间距？那是为宽高比服务的，和间距无关，强行套用会破坏布局流
真正可用的等间距方案：gap 优先
gap 是现代移动端最可靠的选择，它直接定义项目之间的空隙，不干扰尺寸计算，也不依赖元素数量。
- 在
display: flex容器中使用gap: 16px，多行时自动应用 row-gap 和 column-gap - 在
display: grid中同样生效，且能配合grid-template-columns: repeat(auto-fill, minmax(120px, 1fr))实现响应式等距栅格 - 注意：iOS Safari 12.2+、Chrome Android 76+、Firefox 63+ 全面支持，微信 X5 内核（Android）仍需降级，但 fallback 很简单——加一层 wrapper +
margin模拟
示例：
.list {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.item {
flex: 0 0 calc(33.333% - 8px); /* 减去 gap 占位，避免换行错乱 */
}
兼容老环境时怎么写 fallback
微信 Android、UC 浏览器、iOS gap 的场景，不能只靠 @supports，必须结构+样式双降级。
- 给每个子项加
margin-right和margin-bottom，再用:last-child清除末项右距 - 但要注意：flex 多行时
:last-child无法识别“每行最后一个”，此时必须用 JS 或改用 grid（更可控） - 更稳妥的做法是放弃纯 CSS fallback，用
display: grid+gap作为主方案，仅对已知不支持的 UA 注入额外 class 并走 margin 路径
比如检测到微信 X5 内核时，加 class no-gap，然后：
.no-gap .item {
margin-right: 12px;
margin-bottom: 12px;
}
.no-gap .item:nth-child(3n) {
margin-right: 0;
}
真正难的不是写几行 CSS，而是判断哪些设备真正在用、哪些 UA 字符串能准确识别、以及是否值得为 0.3% 的存量用户维护两套逻辑——多数情况下，直接要求 WebView 升级或限制最低支持版本，比硬塞 fallback 更省力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
