直接用 position: fixed + justify-content: space-around 会失效，因为 fixed 容器脱离文档流导致宽度默认为内容宽、无显式高度，使 flex 主轴空间不可计算，iOS Safari 中易出现菜单挤团、左偏或软键盘弹出后工具栏消失等问题。
为什么直接用 position: fixed + justify-content: space-around 会失效
因为 position: fixed 容器脱离文档流，宽度默认是内容宽（不是 100%），且无显式高度参与 flex 计算。justify-content: space-around 需要主轴有明确可分配空间，而 iOS Safari 在这种情况下常把菜单项挤成一团、文字左偏，或软键盘弹出后整个工具栏上浮消失。
常见错误现象：
-
space-around看起来不均分，首尾留白比中间小 - 菜单项宽度随文字长度变化，视觉不一致
- Android WebView 或微信 X5 内核中
flex: 1子项异常撑开
正确做法：用 flex-direction: column 替代 fixed
把整页当垂直 flex 容器，主体占满剩余空间，底部工具栏靠结构自然落底——避开 fixed 兼容性坑，同时给 space-around 提供稳定计算基准。
关键配置：
立即学习“前端免费学习笔记（深入）”；
-
html和body都设height: 100%（否则flex: 1无参考） - 移除
body默认margin（多数浏览器为 8px） - 根容器（如
<div class="app">）设display: flex; flex-direction: column; min-height: 100vh; - 主体内容区域用
flex: 1;，并加overflow-y: auto;确保可滚动 - 底部工具栏容器必须设显式
height（如height: 60px;），不能只靠flex: 0 0 auto
工具栏内部等分与居中怎么写才稳
别用 text-align: center 控制按钮排布，那是给 inline 元素的；也别混用 margin，它会干扰 space-around 的空白分配。
推荐写法：
- 工具栏容器设
display: flex; justify-content: space-around; - 每个按钮设
flex: 0 0 auto;（防压缩）+text-align: center;（居中文本） - 图标统一用
inline SVG或字体图标，避免<img>加载抖动 - 如果按钮内含文字长度差异大，加
min-width: 0;防 Safari 按内容撑宽 - 用
gap替代padding控制按钮间距（自动避开首尾，更干净）
适配安全区和软键盘的关键细节
iPhone X+ 的 Home Indicator、Android 软键盘都会动态压缩 viewport，纯 CSS 方案必须应对这两类干扰。
必须处理的点：
- 工具栏高度要用 CSS 自定义变量统一管理，例如
--nav-height: 60px; - 主内容区加
padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px)); - 避免用
100vh做高度基准——iOS Safari 地址栏隐藏时，100vh会跳变；优先用100dvh（兼容性查 MDN）或 JS 补正 - 微信 WebView 中
env()不生效，需 UA 判断降级为固定值 - 别用
position: sticky替代fixed——它在移动端行为不可控，尤其在 scrollable 容器里根本吸不了底
height，或父容器漏了 min-height: 100vh，导致 space-around 失去主轴尺寸参考，整个布局就飘了。 
