底部Tab栏不一定用position: fixed，可用fixed或sticky实现贴底，Flexbox负责内部均匀布局；需外层定位锁定、内层flex对齐，并用env(safe-area-inset-bottom)适配iOS安全区域。
底部Tab栏必须用 position: fixed 吗？
不一定。Flexbox 本身不负责“固定定位”，但能高效管理 Tab 栏在视口底部的布局结构和交互状态。真正让 Tab 栏“贴底不滚动”的，是 position: fixed 或 position: sticky；Flexbox 的作用是让内部图标、文字、选中态对齐均匀、响应一致。
常见错误是只写 display: flex 却忽略容器高度约束和定位上下文——结果 Tab 栏随内容滚动或塌陷。正确做法是：外层用 position: fixed 锁定位置，内层用 Flexbox 布局子项。
- Tab 容器需设
bottom: 0、left: 0、right: 0，并显式指定height（如56px）或min-height - 避免父容器有
overflow: hidden或 transform，否则可能截断 fixed 元素 - 在 iOS Safari 中，
position: fixed在键盘弹出时可能错位，需配合viewport设置或 JS 临时切为absolute
justify-content 和 flex-grow 怎么选？
两者都能实现等宽分布，但行为不同：前者靠容器分配剩余空间，后者靠子项主动撑开。移动端 Tab 栏推荐用 justify-content: space-between 或 space-around，更可控、无额外计算开销。
flex-grow: 1 在 3–5 个 Tab 时容易导致文字换行或图标挤压，尤其在小屏（如 iPhone SE）上。
立即学习“前端免费学习笔记（深入）”；
-
justify-content: space-between：适合 3–4 个 Tab，两端对齐，中间等距 -
justify-content: space-around：每个 Tab 周围留等量空白，视觉更均衡 - 若需严格等宽（如 5 个 Tab），改用
flex: 1+max-width: 20%限制单个宽度，防溢出
选中态样式为什么总不居中？
因为图标和文字默认 baseline 对齐，且未重置 vertical-align 或 align-items。Flex 容器必须设 align-items: center，子项（a 或 button）需设 display: flex + flex-direction: column 才能让图标和文字垂直居中。
另一个常见问题是选中态边框或背景色覆盖了圆角或阴影，导致视觉割裂。
- Tab 子项统一设
display: flex、flex-direction: column、align-items: center、justify-content: center - 图标用
font-size或width/height显式控制，避免依赖字体渲染差异 - 选中态用
background-color+border-radius，别用outline（会破坏圆角）
如何兼容 iOS Safari 的安全区域（notch）？
iPhone X 及更新机型底部有 Home Indicator 区域，直接贴底的 Tab 栏可能被遮挡或误触。必须用 env(safe-area-inset-bottom) 动态扩展 padding 或 margin。
不能只靠 @supports 检测，iOS 15+ 已普遍支持，应默认启用。
- Tab 容器加
padding-bottom: env(safe-area-inset-bottom) - 若用
position: fixed，则改用padding-bottom而非margin-bottom，避免脱离文档流后失效 - 搭配
height: calc(56px + env(safe-area-inset-bottom))确保容器足够高
overflow: hidden 或 CSS 变量未 fallback，导致 env() 计算为 0。动手前先打开 Safari 开发者工具，检查 computed 样式里的 padding-bottom 是否真实读取到了值。 
