tab栏容器用inline-flex而非flex，因其可收缩包裹内容并配合justify-content: center实现真正居中，避免flex下width:100%导致的左右留白及margin:0 auto在android webview失效问题。
Tab栏容器为什么用inline-flex而不是flex
因为flex会让容器默认占满父级宽度（width: 100%），此时再写justify-content: center，只是把子项在“已撑满的容器内”居中，左右依然留白；而inline-flex让容器收缩包裹内容，justify-content: center才真正把整个Tab栏块水平居中于父容器。
常见错误是给.tabs设display: flex + margin: 0 auto，这在部分Android WebView里会失效——margin: 0 auto对flex容器本身不生效。
-
inline-flex必须配合justify-content: center和gap（比每个子项加margin-right更干净） - 如果父容器是
body或main，确保它没设text-align: center干扰（那是为inline元素准备的） - 不要给
.tabs加width: fit-content，它在旧版Safari中行为不稳定
如何让Tab项既等宽又防小屏挤压？
等宽适合固定数量Tab（如4个），但直接写flex: 1在iPhone SE这类窄屏上会导致文字换行或图标被压扁。关键不是“均分”，而是“有底线地均分”。
- 用
flex: 1 1 0替代flex: 1：明确启用放大和缩小，基准设为0，避免旧版Safari解析异常 - 强制最小宽度：
min-width: 80px（符合44×44px触控热区下限） - 文字截断保形：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - 若Tab数动态变化（如3–6个），改用
flex: 0 1 calc(25% - 1rem)适配，避免某一项突然跳到第二行
横向滚动时Tab项为何被压缩？怎么保持可点击性？
滚动容器一旦设了overflow-x: auto，默认允许flex子项收缩（flex-shrink: 1），窄屏下所有Tab会被压成一条线，点击热区消失。
- 每个Tab项必须加
flex-shrink: 0，阻止浏览器自动压缩 - 容器加
scroll-behavior: smooth提升滚动质感（注意兼容性：iOS Safari 15.4+支持） - 移动端需补
-webkit-overflow-scrolling: touch激活原生惯性滚动 - 别依赖
white-space: nowrap来防换行——它只管文本，不管flex布局的弹性收缩
iOS安全区域和键盘弹出导致Tab栏错位怎么办？
这不是Flex写错了，是视口计算偏差。iOS Safari中100vh不包含底部地址栏，键盘弹出时position: fixed可能上移；Android则可能因transform父容器截断fixed元素。
- Tab栏外层定位优先用
position: sticky; bottom: 0，并确保父容器有overflow: clip - 高度留白必须用
env(safe-area-inset-bottom)：padding-bottom: env(safe-area-inset-bottom) - 避免在Tab栏父级上设
transform、filter或will-change，否则会创建新的定位上下文，截断fixed元素 - 如果必须用
fixed，监听resize事件临时切为absolute，但代价是失去原生滚动锚定
最易被忽略的一点：Tab栏的“自适应”从来不只是Flex属性的事，而是定位方式、安全区域、滚动行为、触控热区四者共同约束的结果。少设一个flex-shrink: 0，窄屏就失焦；漏掉一个env(safe-area-inset-bottom)，iOS上就露白边。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
