最稳妥做法是position: fixed + bottom: 0，flex仅用于内部对齐；需配合env(safe-area-inset-bottom)适配ios安全区，并用flex-basis: 20%实现五格等分，避免flex: 1导致宽度不均。
底部导航栏需要固定在 viewport 底部
直接用 position: fixed + bottom: 0 是最稳妥的做法，Flex 只负责内部对齐，不解决定位问题。很多初学者误以为 flex 容器设成 display: flex 就能“自动贴底”，其实不然——父容器若没高度约束或定位上下文，子项再怎么 flex 也落不到底部。
实际写法是：
.nav-bar {<br> position: fixed;<br> bottom: 0;<br> left: 0;<br> right: 0;<br> display: flex;<br> justify-content: space-between;<br> background: #fff;<br> border-top: 1px solid #eee;<br>}
注意：不要给 .nav-bar 设 height: 100% 或放在一个未设高度的 flex 主轴容器里，否则它会撑满整个视口，失去“底部”语义。
五个图标+文字需等宽且居中对齐
五格导航常见于 iOS/Android 底部 Tab，要求每个 item 水平等分、图标居上、文字居下、点击区域足够大。用 flex: 1 是陷阱——5 个 flex: 1 会因 padding/margin/border 导致宽度不均；更可靠的是显式设 flex-basis: 20%，并配合 box-sizing: border-box。
- 每个
.nav-item设flex: 0 0 20%（即不伸缩、不收缩、基础宽度 20%） - 内部用
flex-direction: column+justify-content: center实现图标文字垂直居中 - 文字字号建议 ≤12px，图标用
font-size或 inline SVG，避免用 img 导致 baseline 对不齐 - 务必加
text-align: center，否则文字可能偏左
选中态高亮与图标状态切换
纯 CSS 实现选中态依赖 :checked + label 配合隐藏 radio，或用 :focus-within + 可聚焦元素。但真实项目中多数用 JS 控制 class，比如 .nav-item.active。此时要注意：
- active 样式优先级要高于默认项，建议写成
.nav-item.active .icon而非单独.active - 图标变色别只改
color，SVG 或 icon font 需要同时控制fill或stroke - 为避免点击穿透，给
.nav-item加cursor: pointer和user-select: none - 移动端需补
-webkit-tap-highlight-color: transparent去掉点击灰斑
兼容性与安全边距处理（iOS Safe Area）
iPhone X 及后续机型有底部安全区，env(safe-area-inset-bottom) 必须参与计算。如果只是简单 padding-bottom: env(safe-area-inset-bottom)，会导致导航栏整体上移——正确做法是把安全区留白加在容器外部，而非内部。
推荐结构：
<div class="nav-wrapper"> <br><nav class="nav-bar">...</nav><br> </div>
然后：
.nav-wrapper {<br> padding-bottom: env(safe-area-inset-bottom);<br>}<br>.nav-bar {<br> /* 不加 padding-bottom，保持原始高度 */<br> height: 56px;<br>}
另外，flex-wrap: nowrap 必须显式声明（旧版 Safari 默认可能 wrap），且所有子项禁止设 min-width，否则在小屏上会挤出横向滚动条。
真机调试时最容易忽略的是：某些安卓 WebView 不支持 env()，得 fallback 到 @supports 检测或 JS 注入 class。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
