移动端flex横向滚动中gap无法触发滚动，因gap不改变容器溢出行为；可靠方案是用margin-right配合:last-child清除或伪元素模拟间隙，且必须设置flex-shrink: 0防止压缩。
gap 在移动端 flex 布局中不控制滚动条目间距
直接用 gap 无法让「滑动区域内的条目」产生可滚动的间隙效果——因为 gap 只作用于 flex 或 grid 容器的直接子元素之间，它不会影响容器自身的 overflow 行为，更不会“撑开”滚动容器高度或宽度来触发滚动。
常见误解是给一个 overflow-x: auto 的横向滚动容器加 gap: 12px，结果条目紧贴、滚动卡顿、最后一项被截断。问题不在 gap 写错了，而在没理解它的生效前提和滚动机制冲突点。
移动端横向滚动条目必须靠 margin 或伪元素留空
真正能稳定控制滑动条目间视觉/物理间距的方式只有两种，且都绕不开「手动预留空间」：
-
用
margin-right（推荐）：给每个条目加margin-right: 12px，但最后一个条目需用:last-child清除，否则多出一段空白导致滚动过长 -
用伪元素 +
flex-shrink: 0：在容器末尾插入::after，设宽高为 0、flex-shrink: 0，再用margin-left模拟间隙——适合需要精确对齐首尾的场景
示例（简洁可靠）：
.scroll-row {
display: flex;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.scroll-row > * {
margin-right: 12px;
flex-shrink: 0;
}
.scroll-row > *:last-child {
margin-right: 0;
}
gap 和 margin 混用会破坏滚动体验
如果同时写 display: flex; gap: 12px; overflow-x: auto，在 Safari iOS 16.4+ 和 Chrome Android 上可能看似正常，但实际存在两个隐患：
-
gap会让容器计算出更大的scrollWidth，但某些 WebView 不会把 gap 空间计入可滚动范围，导致最后一项无法完全滑入视口 - 当条目使用
width: 100%或flex: 0 0 auto时，gap可能被压缩或忽略，尤其在低版本 Android Webview 中 - 滚动惯性（momentum scroll）受容器内联尺寸影响，gap 引入的不可见空间会让浏览器误判内容密度，造成滑动停顿感
真要兼容 gap，得配合 width 计算和 container query
如果你坚持用 gap（比如团队统一用 CSS Grid 布局），唯一稳妥路径是放弃纯 flex 横向滚动，改用：
- 固定列数 +
grid-template-columns: repeat(3, 1fr)+gap: 12px - 外层容器设
overflow-x: auto，内层 grid 设width: max-content，并用min-width防止收缩 - 关键补丁：
scroll-snap-type: x mandatory+ 条目加scroll-snap-align: start，避免间隙导致对不准
但这已不是「控制滑动条目」，而是重构滚动逻辑——多数商城首页轮播、商品栏仍应优先选 margin 方案。
最易被忽略的一点：iOS Safari 对 flex-shrink: 0 的处理比安卓更严格，漏写这句，哪怕只有一行 margin，滚动时条目也会被压缩变形。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
