flex: auto 不均分是因为它等价于 flex: 1 1 auto，基准宽度为内容宽度，文字长短导致初始宽不同；需改用 flex: 1 0 0 并设 min-width: 0 才能严格等分。
flex: auto 为什么在移动端菜单里不均分？
因为 flex: auto 不等于“等宽”，它只是 flex: 1 1 auto 的简写，意味着「放大+缩小+基准尺寸为内容宽度」。菜单项文字长度不同，初始宽度就不同，flex: auto 会在此基础上再分配剩余空间，结果就是长文本项更宽、短文本项更窄。
常见错误现象：nav li { flex: auto; } 写了但按钮宽度参差不齐，尤其在 iOS Safari 下更明显（因默认 min-width: auto 行为差异）。
- 真正需要的是「忽略内容宽度，强制均分容器」→ 用
flex: 1（即flex: 1 1 0） - 必须设父容器为
display: flex，且子项不能有固定宽度（如width或min-width干扰） - 移动端需加
flex-shrink: 0防 iOS Safari 意外压缩图标或文字
移动端菜单均分的最小可靠写法
不用计算百分比，也不依赖 JS，纯 CSS 就能稳定均分，关键是控制好三个属性：伸缩性、基准值、最小约束。
典型场景：底部导航栏 4 个图标文字组合，横屏/竖屏都要严格等宽，且点击区域足够大。
立即学习“前端免费学习笔记（深入）”；
- 父容器：
display: flex+width: 100%（避免受祖先影响） - 子项：
flex: 1 0 0（等价于flex: 1），显式写0更易理解基准为零 - 补一手兼容：
min-width: 0（防 Chrome/Firefox 对 inline 元素的默认最小宽度干扰）
nav.menu {
display: flex;
width: 100%;
}
nav.menu > a {
flex: 1 0 0;
min-width: 0;
text-align: center;
}为什么加了 flex: 1 还是不均分？检查这几点
不是写上 flex: 1 就万事大吉，移动端各种隐性样式会悄悄破坏均分逻辑。
常见错误现象：安卓 Chrome 正常，iOS Safari 中某一项突然变窄；或者加了图标后布局错位。
-
white-space: nowrap被继承 → 导致文字不换行撑开宽度 → 加white-space: normal或word-break: break-word - 图标用了
inline-block或未重置vertical-align→ 引起基线对齐偏移 → 统一设vertical-align: top - 字体加载延迟导致重排 → 初始渲染时按 fallback 字体宽度计算，后续跳变 → 给容器设固定
height或用font-display: optional - 父容器有
padding但没配box-sizing: border-box→ 实际可用宽度不足 → 确保全局或局部设box-sizing: border-box
flex: 1 和 justify-content: space-around 的区别在哪
这是最容易混淆的两个方案。前者是「每个子项主动占满一份」，后者是「让浏览器在子项之间和边缘塞空隙」。
使用场景差异极大：如果菜单项数量固定（比如总是 4 个），flex: 1 更稳；如果数量动态（可能 2～5 个），justify-content: space-around 更灵活，但需额外处理边缘间距和最小点击区域。
-
flex: 1：子项宽度 = (容器宽 - 总 padding/margin) ÷ 个数，完全可控 -
justify-content: space-around：子项保持自身宽度，只调节间隙，无法保证等宽 - 性能影响：两者都是纯 CSS 布局，无重排，但
space-around在项数变化时视觉跳跃更明显 - 兼容性：
flex: 1在 iOS 9.3+ / Android 4.4+ 完全 OK；space-around在旧版 UC 浏览器有 bug，慎用
复杂点往往藏在「文字截断」和「图标对齐」的细节里——比如 text-overflow: ellipsis 需配合 white-space: nowrap 和 overflow: hidden，但这两者又和 flex: 1 的换行需求冲突。得根据实际内容决定优先保宽度还是保可读性。
