移动端页签滚动需用 display: flex + flex-wrap: nowrap + overflow-x: auto 实现，关键在隐藏滚动条、保障触控顺滑及旧安卓兼容；页签须内容自适应宽度并满足最小触控44px，禁用 flex: 1 均分；激活态优先用 transform: scale 配 will-change 提升性能。
直接用 display: flex + flex-wrap: nowrap + overflow-x: auto 就能搞定，不需要 JavaScript，也不依赖第三方框架。关键不是“怎么让页签滚动”，而是“怎么避免滚动条干扰视觉、怎么保证触控顺滑、怎么在旧 Android 浏览器里不崩”。
移动端页签必须禁用换行且允许横向滚动
页签（tab）本质是水平排列的可点击项，一旦换行就失去导航语义。很多开发者写 flex-wrap: wrap 或漏设 white-space: nowrap，结果小屏下自动折成两行，用户根本点不到下半部分。
-
flex-wrap: nowrap是硬性要求，必须显式声明（哪怕默认值就是它） -
white-space: nowrap加在容器上，防止文字内联元素意外折行 -
overflow-x: auto和-webkit-overflow-scrolling: touch一起加，iOS 才有惯性滚动 - 别忘了
scrollbar-width: none（Firefox）和::-webkit-scrollbar { display: none }隐藏原生滚动条
页签项宽度要“内容自适应”，但需限制最小可点区域
移动端点击目标太小会触发误操作。W3C WCAG 推荐最小触控区域为 44px × 44px，但直接设 min-width: 44px 会导致文字多的页签被撑开、排不进屏幕。
- 用
flex: 0 0 auto让每个页签按文字宽度收缩，不抢空间 - 再用
padding: 0.75rem 1rem（约 12px 上下 + 16px 左右）自然撑出可点区域 - 对超长文字加
text-overflow: ellipsis+white-space: nowrap+overflow: hidden - 避免用
flex: 1均分宽度——页签语义不均等，强制等宽反而降低可读性
兼容性兜底必须覆盖 Android 4.4+ 和 iOS 8+
老安卓 WebView（如 UC、QQ 浏览器内核）对 gap 和 flex-shrink: 0 支持不稳定，一加就白屏或错位。
- 放弃
gap，改用margin-right控制页签间距，并给最后一项margin-right: 0 - 用三重前缀声明
display：display: -webkit-box、display: -webkit-flex、display: flex -
flex: 0 0 auto在旧引擎里可能失效，补一句-webkit-box-flex: 0和-webkit-flex: 0 0 auto - 测试重点机型：华为 EMUI 4.0（Android 5.1）、小米 MIUI 9（Android 7.0）、iPhone 5s（iOS 9.3）
激活态样式要兼顾视觉反馈与性能
用 :active 伪类做点击反馈最轻量，但部分安卓机不触发；用 JS 切 class 又引入额外状态管理。折中方案是 CSS-only + 硬件加速。
- 激活页签用
transform: scale(0.96)，比改 background-color 更流畅 - 加
will-change: transform提前提示浏览器优化渲染路径 - 避免在
:active里改height或padding——触发布局重排，卡顿明显 - 如果需要“底部指示条”效果，用
box-shadow: inset 0 -3px 0 #007aff而非绝对定位的div，减少层叠上下文
真正难的不是写出来，是让所有页签在 320px 宽的 iPhone SE 屏幕上左右滑动时，手指一划就准确定位、松手即停、不抖不跳——这取决于 scroll-behavior 是否设为 smooth（仅现代浏览器支持），以及是否在容器上加了 touch-action: pan-x 来禁止误触发双指缩放。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
