关键不是“先固定再等分”，而是先保证布局上下文稳定，再让子项真正均宽：父容器必须显式设display: flex，子项用flex: 1 1 0 + min-width: 0 + box-sizing: border-box，并重置button默认样式，配合env(safe-area-inset-bottom)适配ios安全区。
用 Flex 实现移动端底部悬浮操作栏的等分排列，关键不是“先固定再等分”，而是**先保证布局上下文稳定，再让子项真正均宽**。直接套用 flex: 1 往往失效，尤其在 iOS Safari 中——文字撑开、图标尺寸不一、按钮默认样式干扰，都会破坏视觉等分。
确保父容器是真正的 flex 容器
操作栏外层容器（比如 <footer></footer> 或 <nav class="bottom-bar"></nav>）必须显式设为 display: flex。只给内部按钮加 flex: 1 没用，因为父容器没启用弹性布局，所有 flex 属性都不生效。
- 写法示例：
.bottom-bar { display: flex; height: 60px; } - 避免用
inline-flex，它可能导致高度计算异常或与 padding 冲突 - 不要用
width: 100%+justify-content: space-between模拟等分——间隙会随缩放抖动，且无法应对不同字数
子项用 flex: 1 1 0 + min-width: 0
每个导航项（如 <button></button> 或 <a></a>）需设 flex: 1 1 0，并强制 min-width: 0。这是 Safari 等分失效的主因：浏览器默认按内容最小宽度限制伸缩，min-width: 0 才能让 flex-basis: 0 生效，真正从零开始均分。
-
flex: 1 1 0等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0 - 子项统一加
box-sizing: border-box，避免 padding/border 导致总宽溢出 - 若含图标和文字，建议用
display: flex; flex-direction: column; align-items: center;垂直居中，避免文字换行撑高
适配 iOS 安全区与软键盘弹出
纯 Flex 布局虽不依赖 position: fixed，但作为悬浮操作栏，仍需处理 iOS 的安全区和键盘弹起问题：
- 给
html和body设height: 100%，并重置默认 margin（margin: 0），否则 flex 高度无参考基准 - 操作栏自身高度用固定值（如
60px），别用vh或百分比，防止 Safari 地址栏收放时跳变 - 为兼容安全区，在操作栏上加
padding-bottom: env(safe-area-inset-bottom)，同时用height: calc(60px + env(safe-area-inset-bottom))保持视觉高度一致 - 避免在操作栏内放
<input>或<textarea></textarea>，键盘弹出会触发 viewport 缩小，导致定位错乱
按钮样式需主动重置
用 <button></button> 包裹导航项很常见，但各浏览器对 button 的默认 padding、background、border 不一致，会破坏等分效果和点击热区。
- 统一重置：
button { padding: 0; background: none; border: none; } - 图标推荐用 inline SVG 或字体图标，避免
<img>加载延迟引起的布局抖动 - 文字过长时加
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，防止换行破坏高度一致性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
