flex: 1 在 Tab 栏不均分，因它本质是 flex: 1 1 0，需配合 min-width: 0、父容器 width 可控、清除子项 width/min-width/padding 干扰，否则 Safari 的 min-width: auto 会按内容撑开破坏均分。
flex: 1 为什么在 Tab 栏里不均分？
因为 flex: 1 不是“让子项变一样宽”的魔法开关，它只是 flex: 1 1 0 的简写，含义是「可放大、可缩小、基准宽度为 0」。但前提是父容器必须是 display: flex，且有明确宽度（比如 width: 100% 或全屏约束），否则浏览器根本不知道“剩余空间”在哪。
常见错误现象：.tabbar 容器设了 display: flex，四个子项都写了 flex: 1，结果在 iOS Safari 上最后一项明显偏窄，或文字一长就换行、溢出。
- 没加
min-width: 0：Safari 默认给 flex 项设min-width: auto，会按文字内容撑开，破坏均分 - 父容器没设
width: 100%：受祖先元素影响（比如外层div没撑满），flex 计算基准丢失 - 子项用了
width、min-width或padding过大：干扰 flex 基准，尤其图标 + 文字组合时 padding 不一致更易出错
Tab 项怎么写才能真正等宽？
别用 flex: auto 或 flex: 1 1 auto，它们的基准是内容宽度，文字长短直接导致初始宽不同。要的是“无视内容，强制平分”。
- 每个 Tab 项设
flex: 1 1 0（或简写flex: 1），但必须搭配min-width: 0 - 子项内部用
display: flex; flex-direction: column; align-items: center;居中图标和文字，别依赖text-align: center+margin: auto - 禁用
<img alt="怎样使用CSS Flex布局实现移动端底部Tab导航_分配flex:1实现均分宽度" >图标——加载延迟会导致布局抖动；统一用<svg>或字体图标 - 如果用
<button>包裹，记得重置默认padding和border，否则安卓/IOS 表现不一致
为什么 justify-content: space-between 看起来不均匀？
它只控制主轴上的“空隙分配”，不是“项宽控制”。4 个项用 space-between，首尾项会贴边，中间两个项间距大，视觉上像“三段式”，尤其在小屏上更明显。真机测试中，用户点击热区容易误判。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：父容器
display: flex，子项全部flex: 1 1 0; min-width: 0;，再配justify-content: center或干脆不设（flex:1 已保证等宽） - 避免
justify-content: space-around—— 首尾留白不可控，iOS 下 padding 表现不稳定 - 不要给子项设固定
width或max-width，否则 flex 计算被绕过
移动端必须处理的三个兼容细节
iOS Safari 是最大变量。哪怕 CSS 写对了，漏掉以下任一细节，均分就会失效或错位。
-
html和body都要加min-height: 100vh（不用height: 100vh，防地址栏缩放截断） - 底部 Tab 容器外层加
padding-bottom: env(safe-area-inset-bottom)，内部用固定height: 60px，不能靠flex-shrink: 0抗压 - 主体内容容器必须设
flex: 1并overflow-y: auto，否则滚动时 Tab 栏会上浮——这不是 flex 问题，是 viewport 高度突变导致的渲染错乱
最易忽略的是 min-width: 0，它不起眼，但在 iOS Safari 上决定均分成败。其他所有 flex 设置都对，就差这一句，整排 Tab 就会“看起来差不多但其实不等”。
