直接用display: flex+overflow-x: auto能跑通，但真机卡住、点不中、滑不动，八成漏了flex-shrink: 0、flex-wrap: nowrap或-webkit-overflow-scrolling: touch这三个关键点。
直接用 display: flex + overflow-x: auto 就能跑通，但真机上卡住、点不中、滑不动——八成是漏了 flex-shrink: 0、flex-wrap: nowrap 或 -webkit-overflow-scrolling: touch 这三个关键点。
为什么 overflow-x: auto 在 iOS 上完全没反应
iOS Safari 默认禁用原生横向滚动的惯性行为，光靠 overflow-x: auto 只会“推一下动一下”，松手就停，甚至根本拖不动。这不是 bug，是 WebKit 的滚动策略限制。
- 必须加
-webkit-overflow-scrolling: touch（iOS 15+ 可省略，但留着更稳） - 容器不能有
transform、filter或will-change，否则合成层被破坏，滚动掉帧或失效 - 别用
overflow-x: scroll—— 它强制显示滚动条，空滚动条在移动端遮挡内容且体验差；auto更合理
子项被压缩成一条细线，或突然换行堆叠
Flex 子项默认 flex-shrink: 1，一旦容器宽度不够，卡片就会被无情压扁；而换行则说明主轴约束失效，不是“横向滚动”，是“意外折行”。
- 所有子项统一加
flex-shrink: 0（等价于flex: none），一个都不能漏 - 父容器显式声明
flex-wrap: nowrap，哪怕它是默认值——某些旧版 WebView 会忽略隐式设置 - 子项设
min-width: 120px或min-width: fit-content，防止单个长文本撑爆布局或缩成看不见 - 加
white-space: nowrap到容器上，避免内联文本节点触发意外换行
首尾商品点不到，手指总滑过
横向滚动栏紧贴屏幕左右边缘时，iOS 和部分安卓 WebView 会把首尾 8–12px 区域判定为“不可触控区”，尤其在刘海屏或圆角屏上更明显。
- 给容器加
padding-inline: 16px（或padding-left/padding-right），让内容实际起始/结束位置向内缩进 - 别依赖
scroll-snap-align: center来“修正点击”——它只影响松手后的吸附位置，对点击跳转无效 - 如果要用
scroll-snap-type: x mandatory，每个子项必须设scroll-snap-align: start，否则 snap 锚点错位，滑到一半就卡住
真正难调的不是“让它滚起来”，而是“每次都能滚到头、点得准、不抽风”——这三个点：flex-shrink: 0、flex-wrap: nowrap、-webkit-overflow-scrolling: touch，漏掉任何一个，在真机上都会立刻暴露。尤其是 flex-shrink: 0，很多人只给部分卡片加，结果整行对齐崩掉，却反复检查 JS 而不是 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
