必须设flex-wrap: nowrap、容器明确宽度、子项flex-shrink: 0，否则子项被压缩或换行导致滚动失效；ios需加-webkit-overflow-scrolling: touch和scroll-behavior: smooth；首尾难点击则用padding-inline预留触控区。
直接用 display: flex + overflow-x: auto 就能跑通，但多数人卡在子项被压缩、iOS 滚不动、首尾贴边点不到这三处。
容器必须设 flex-wrap: nowrap 且宽度明确
很多布局“看起来横向滚动”，实际一缩放就换行——根本原因是父容器没禁掉换行，或者宽度没撑开。
-
display: flex启动弹性布局，但默认允许换行（flex-wrap: wrap），必须显式写flex-wrap: nowrap - 容器得有明确宽度，比如
width: 100%或max-width: 100vw；如果父级是inline元素或未设宽，overflow-x会失效 - 加
overflow-y: hidden防止内容高不一致时意外触发垂直滚动条
子项必须设 flex-shrink: 0 或 flex: none
Flex 子项默认 flex-shrink: 1，容器一窄，卡片就被压扁，文字挤成一团，滚动根本触发不了。
- 统一给商品卡片加
flex-shrink: 0，等价于flex: none（即flex: 0 0 auto） - 别只给部分卡片设——漏一个，它就会被压缩，拖垮整行对齐
- 如果卡片内含长文本，再加
min-width: fit-content或具体值（如min-width: 120px），防止单项过宽撑爆布局
移动端滚动卡顿？补这两行 CSS 就行
iOS Safari 和部分安卓 WebView 默认禁用惯性滚动，光靠 overflow-x: auto 会滑一下停一下，像推箱子。
- 加
-webkit-overflow-scrolling: touch（iOS 15+ 可省略，但留着更稳） - 加
scroll-behavior: smooth让手动滑动和 JSscrollIntoView都更顺滑 - 务必检查：容器不能有
transform、filter或will-change，这些会干扰合成层，导致滚动掉帧
首尾内容难点击？用 padding 换来可触区域
横向滚动栏两端紧贴屏幕边缘，手指容易滑过、点不中第一个或最后一个商品。
- 给容器加
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、nowrap、-webkit-overflow-scrolling 这三个点漏掉任何一个，都会在真机上露出马脚。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
