flex: 1 在 Tab 栏不均分，因其本质是 flex: 1 1 0（可放大、可缩小、基准宽为 0），需父容器 width 可控、子项清除 width/min-width/padding 干扰，并显式设 min-width: 0，否则 Safari 默认 min-width: auto 会按内容撑开破坏均分。
为什么 flex: 1 在底部 Tab 栏里反而撑开、不压缩？
因为 flex: 1 是 flex: 1 1 0 的简写，它让子项「可放大、可缩小、基准宽度为 0」——但前提是浏览器能算出“剩余空间”。如果父容器没设 width: 100%，或子项自带 min-width: auto（Safari 默认行为），或内部有未约束的 padding/width，flex 就会失效，文字一长就溢出或换行。
- 必须给每个 Tab 项显式加
min-width: 0，否则 Safari 会按文字内容撑开 - 父容器（如
.tabbar）需设width: 100%或max-width: 100vw，避免受祖先元素缩窄影响 - 禁用子项上的
width、min-width、padding（尤其图标+文字组合时左右 padding 不一致最易破坏均分）
图标与文字如何紧凑堆叠又不挤占空间？
直接对按钮整体设 display: flex 会导致文字换行后图标“悬空”在第一行末尾。真正紧凑的关键是隔离图文布局上下文。
- 每个 Tab 项内再套一层
display: flex容器，方向为column - 图标用
flex-shrink: 0+height: 1.2em+line-height: 1.2em锁定尺寸和基线 - 文字区域用
flex: 1+min-width: 0+overflow-wrap: break-word，确保长词自动折行且不撑开图标位置 - 避免用
text-align: center+margin: auto居中——响应式下易错位
怎样让小屏下所有 Tab 项自动压缩到最小可点区域？
移动端点击热区不能小于 44px × 44px，但强制等宽会浪费空间、挤压文字。目标是「内容自适应宽度 + 最小触控保障」。
- Tab 项设
flex: 0 0 auto，不抢空间，只按文字/图标自然宽度收缩 - 靠
padding: 0.75rem 1rem（≈12px 上下 + 16px 左右）自然撑出可点区域 - 超长文字统一加
white-space: nowrap+overflow: hidden+text-overflow: ellipsis - 禁用
font-size: 12px等过小字号；建议最低设14px并加-webkit-text-size-adjust: none
哪些样式组合会让底部 Tab 在 iOS 上突然错位？
iOS Safari 对 flex 计算特别敏感，几个看似无害的组合会连锁触发布局崩塌。
立即学习“前端免费学习笔记（深入）”；
-
justify-content: space-between+ 四个 Tab 项 → 首尾贴边、中间间距过大，小屏下热区误判率飙升 -
button元素未重置默认padding和border→ iOS 与安卓表现不一致，宽度计算偏差 -
img图标未替换为svg或字体图标 → 加载延迟导致首次渲染抖动，flex 基准重算 - 父容器用了
transform（如scale(0.9)）又同时设overflow-x: auto→ 某些旧版 WebKit 会禁用硬件加速，滚动卡顿
真正极致的压缩不是靠强行缩字体或删 padding，而是让 flex 基准干净、图文布局解耦、触控区域由 padding 自然撑起——这些细节一旦漏掉一个，真机上就会出现最后一项偏窄、文字掉行、点击失灵等问题。
