justify-content: space-around 在 position: fixed 底部菜单中失效，因 fixed 容器脱离文档流、缺显式宽高导致主轴空间不可控，尤其 iOS Safari 渲染异常；应改用 flex-column 布局并设显式高度。
直接用 position: fixed 做底部菜单，90% 的问题都出在它和 justify-content: space-around 一起用时失效——不是 Flex 写错了，而是 fixed 容器没给 space-around 提供可计算的空间基准。
为什么 justify-content: space-around 在 position: fixed 容器里不工作
很多人写成这样：
.tab-bar {
position: fixed;
bottom: 0;
display: flex;
justify-content: space-around;
}
结果菜单项挤在一起、文字偏左、iOS Safari 里软键盘弹出后整个栏上浮或消失。根本原因有三个：
-
position: fixed容器脱离文档流，width默认是内容宽度（不是100%），space-around没法均分一个“看不见”的主轴长度 - 容器没设
height或min-height，flex 主轴尺寸为 0，space-around失去计算依据 - iOS Safari 对无显式宽高的 fixed + flex 组合渲染异常，尤其在 viewport 高度动态变化（如软键盘）时
推荐方案：用 flex-direction: column 替代 position: fixed
把整页当垂直 flex 容器，主体占满剩余空间，底部菜单靠结构自然落底——既避开 fixed 兼容性坑，又让 space-around 有稳定基准。
立即学习“前端免费学习笔记（深入）”；
- 根容器（如
<div class="app">）设：display: flex、flex-direction: column、min-height: 100vh - 主体内容区用：
flex: 1（确保撑开可用高度，不被菜单遮挡） - 底部菜单容器必须设显式
height（如height: 60px），否则space-around无法分配间距 - 菜单项统一用：
flex: 0 0 auto（防压缩），文字加text-align: center居中
如果必须用 position: fixed，怎么补救？
常见于已有项目难重构，或需强穿透滚动的场景。此时不能把菜单放进 flex 容器内，而要让它作为兄弟元素独立存在，并靠 padding-bottom 预留空间：
- 主内容容器加：
padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom)) - 用 CSS 自定义属性统一管理高度：
--nav-height: 60px，避免硬编码 - 菜单本身仍需设
width: 100%和显式height，再加display: flex+justify-content: space-around - 别用
margin-bottom替代padding-bottom——margin 会折叠，且在某些 WebView 中不可靠
space-around 和 space-between 到底怎么选
两者视觉差异明显，选错会导致首尾留白失控：
- 用
space-around：适合图标为主、文字短、需要“呼吸感”的 Tab，两端留白是中间间隙的一半，更柔和；但只有 1 个菜单项时，它会居中，没问题 - 用
space-between：适合项数固定（≥2）、要求首尾贴边的场景；但注意：只有 1 个菜单项时，它会右对齐，需额外加text-align: center或 JS 动态判断 - 千万别混用
margin：子项加margin-left/right会干扰space-around的空间分配，导致右侧多一倍空白
最易被忽略的是：所有这些方案都依赖父容器真实撑开视口高度。如果 html 或 body 有默认 margin、没重置 min-height、或用了 height: 100vh（内容超长时会截断），flex 布局就从根上失效——这时再调 justify-content 也没用。
