justify-content: space-around 在 fixed 底部菜单中失效，因 fixed 容器脱离文档流、缺显式宽高导致 flex 主轴空间不可控，尤其 ios safari 渲染异常；应改用 flex-column 布局并设显式高度。
直接用 justify-content: space-around 做底部菜单，不加约束会失效——它需要父容器有明确的 flex 上下文和高度基准，否则 iOS Safari 里菜单项挤成一团或错位。
为什么 justify-content: space-around 在底部 fixed 容器里不工作
很多人把底部菜单容器设成 position: fixed; bottom: 0;，再加 display: flex; justify-content: space-around;，结果发现：菜单项没等距、文字偏左、软键盘弹出后整个菜单上浮或消失。
根本原因是：position: fixed 容器脱离文档流，宽度默认为内容宽度（不是 100%），且没有高度参与布局计算；space-around 需要主轴方向有明确可分配空间，而 fixed 容器在无显式 width 和 height 时，flex 行为不可靠，尤其在旧版 iOS Safari 中渲染异常。
- iOS 软键盘弹出时，
fixed元素常被 viewport 缩放逻辑干扰，导致位置错乱 -
space-around计算依赖父容器主轴长度，但fixed容器若没设width: 100%，实际宽度可能小于视口 - 子项若有
padding或不同文字长度，space-around不会“均分视觉宽度”，只均分剩余空白，容易看起来不匀
正确做法：用 flex-direction: column 替代 position: fixed
把整页当垂直 flex 容器，主体占满剩余空间，底部菜单固定高度并自然落底——既避开 fixed 的兼容性坑，又让 space-around 有稳定计算基准。
- 根容器（如
或外层<div class="app">）设 <code>display: flex; flex-direction: column; min-height: 100vh; - 主体内容区域用
flex: 1;，确保撑开可用高度，不被底部遮挡 - 底部菜单容器必须设显式
height（如height: 60px;），否则space-around缺少主轴尺寸参考，间距计算失准 - 菜单项统一用
flex: 0 0 auto;，防止被压缩；文字用text-align: center;居中 - 用
space-around：适合图标为主、文字短、需要“呼吸感”的底部 Tab，两端留白是中间间隙的一半，更柔和 - 用
space-between：适合项数固定（≥2）、要求首尾贴边的场景，但注意：只有 1 个菜单项时，它会直接右对齐，需配合text-align: center或 JS 动态判断 - 别混用
margin：子项加margin-left/right会干扰space-around的空间分配，导致右侧多一倍空白 - 真要“绝对均宽”，别依赖
justify-content，改用flex: 1+text-align: center，每个菜单项平分父容器宽度 - 必须给底部容器加
min-width: 100%;或width: 100vw;，避免因 viewport 缩放导致宽度丢失 - 避免在菜单项上用
line-height控制垂直居中，改用display: flex; align-items: center;更稳 - 软键盘弹出时，部分安卓 WebView 会重算 viewport height，建议监听
resize事件，必要时用scrollIntoView({ block: 'nearest' })微调 - 如果菜单含图标+文字，图标用
font-size或background-image，别用img标签——后者默认vertical-align: baseline，易造成基线偏移
justify-content: space-around 和 space-between 怎么选
两者视觉差异明显，选错会导致首尾留白失控或项数变化时布局崩塌。
移动端绕不开的兼容性细节
iOS Safari（尤其是 15 及更早版本）对 flex + fixed 组合有渲染偏差，space-around 在某些机型上会忽略首尾留白或压缩子项。
真正麻烦的不是写几行 CSS，而是菜单项动态增删、软键盘反复弹收、横竖屏切换时，space-around 的表现会随容器尺寸抖动。最稳妥的底线是：始终控制父容器宽度与高度，别让它“猜”。
