直接用 display: flex 无法滑动是因为 Flex 容器默认不处理溢出，必须显式设置 overflow-x: auto、flex-wrap: nowrap、-webkit-overflow-scrolling: touch 及子项固定宽度才能实现可靠横向滚动。
为什么直接用 display: flex 无法滑动？
Flex 容器默认会把子项压缩进一行，即使内容超出容器宽度，也不会自动产生横向滚动条。关键在于：Flex 本身不控制溢出行为，overflow-x: auto 必须显式加在容器上，且要配合 white-space: nowrap 或子项不换行约束 —— 但后者在 Flex 中其实更依赖 flex-wrap: nowrap 和子项的尺寸控制。
- 缺
overflow-x: auto→ 滚动条不出现，内容被裁剪或换行 - 父容器没设固定高度/宽度（尤其在移动端）→ 滚动区域不可预测
- 卡片用了
flex: 1或width: 100%→ 所有卡片强行撑满容器，失去横向排列基础 - 没禁用触摸回弹（iOS Safari）→ 滑动卡顿、松手回弹干扰体验
必须设置的最小 CSS 组合
以下四点缺一不可，否则在 iOS/Android WebView 中大概率失效：
- 容器设
display: flex+flex-wrap: nowrap - 容器设
overflow-x: auto+scroll-behavior: smooth（可选但推荐） - 容器设
-webkit-overflow-scrolling: touch（iOS 旧版 Safari 必加，否则滑动生涩） - 卡片设固定宽度（如
flex: 0 0 80%或width: 140px），禁止弹性拉伸
示例容器样式：
.card-list {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
padding: 0 12px;
}
<p>.card-list .card {
flex: 0 0 140px; /<em> 不放大、不缩小、固定宽 </em>/
margin-right: 12px;
min-width: 0; /<em> 防止文本撑宽导致换行 </em>/
}</p>
移动端适配的关键细节
纯 CSS 实现横向滑动，最常翻车的地方不在 Flex 本身，而在视口和缩放行为：
- 务必在
中加，否则 iOS 可能触发双击缩放，中断滑动 - 卡片内图片建议用
max-width: 100%+height: auto，避免破坏固定宽高比 - 如果卡片含文字，用
word-break: keep-all防止长单词强制换行挤乱布局 - 安卓部分低端机对
scroll-behavior支持差，可降级为 JS 监听touchmove做简单阻尼，但多数场景非必需
为什么不用 scroll-snap-type？
它确实能让卡片“吸附”对齐，但兼容性仍是硬伤：scroll-snap-type: x mandatory 在 Android 10 以下、iOS 13 以下基本无效；而且一旦卡片宽度动态变化（比如响应式缩放），吸附位置容易偏移。真要精准停靠，不如用 IntersectionObserver + scrollTo() 控制，但这就超出纯 CSS 范畴了。
Flex 横向滑动本身很简单，难的是让每一部手机都顺滑停准——往往多调半行 CSS，不如少一个 margin 写错单位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
