横向滚动需同时设置flex-shrink: 0、flex-wrap: nowrap和-webkit-overflow-scrolling: touch，缺一不可；否则真机出现子项压缩、ios无法惯性滚动、首尾点击失效等问题。
直接用 display: flex + overflow-x: auto 就能跑通，但真机上大概率会翻车——子元素被压缩、iOS 滚不动、首尾点不中，这三个问题漏一个，横向滚动就形同虚设。
为什么子元素总被压扁？关键在 flex-shrink
Flex 子项默认 flex-shrink: 1，容器一窄，所有卡片立刻“自愿”收缩。哪怕你写了 width: 150px，也挡不住这个默认行为。
- 必须显式设
flex-shrink: 0，等价于flex: none或flex: 0 0 auto - 别只给部分子项加——漏一个，它就会被压，整行对齐崩掉
- 若子项含长文本，建议加
min-width: fit-content或具体值（如min-width: 120px），防止单项撑爆布局
容器宽度和换行控制必须显式声明
display: flex 不等于自动横向滚动。容器没宽度、允许换行，滚动根本不会触发。
- 容器必须设
flex-wrap: nowrap（虽然 row 默认是 nowrap，但显式写更稳） - 容器得有明确宽度：比如
width: 100%、max-width: 100vw；父级是 inline 元素或未设宽时，overflow-x会静默失效 - 加
overflow-y: hidden防止子项高度不一致意外拉出垂直滚动条
iOS 滚不动？补两行 CSS 就行
iOS Safari 和多数安卓 WebView 默认禁用惯性滚动，overflow-x: auto 只能“滑一下停一下”，体验像推箱子。
- 加
-webkit-overflow-scrolling: touch（iOS 15+ 可省略，但留着兼容更稳） - 加
scroll-behavior: smooth，让手动滑动和 JS 的scrollIntoView都顺滑 - 务必检查容器是否用了
transform、filter或will-change——这些会干扰合成层，导致掉帧卡顿
首尾内容点不到？用 padding-inline 换触控区
横向滚动栏紧贴屏幕边缘时，手指容易滑过第一个/最后一个子项，尤其在小屏上。
- 给容器加
padding-inline: 16px（或padding-left/padding-right），让内容“浮”进可视区，留出可触区域 - 别依赖
scroll-snap-align: center来居中——它只在松手后生效，点击跳转仍需 JS 配合scrollIntoView - 若用
scroll-snap-type: x mandatory，每个子项必须设scroll-snap-align: start，否则 snap 错位
真正麻烦的不是“怎么让它滚”，而是“怎么让它每次都能滚到头、点得准、不抽风”——flex-shrink: 0、flex-wrap: nowrap、-webkit-overflow-scrolling: touch 这三个点，少一个，真机上就露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
