移动端底部导航栏应采用语义化html结构与flex column布局，nav作为body直接子元素置于header、main之后，main设flex:1撑高，nav通过flex:1子项等分并适配安全区，确保稳定落底。
移动端底部导航栏的基础布局，关键在于结构语义清晰、层级合理、不依赖 fixed 定位，同时为后续 Flexbox 分配和安全区适配打好基础。
使用标准语义化 HTML 结构
导航栏必须是页面主结构的一部分，与 header 和 main 同级，放在 body 直接子元素中：
- 用 包裹整个导航区域，体现其导航功能
- 每个导航项用 或 ，避免用 div 模拟可点击行为
- 图标建议内联 SVG，文字紧贴图标下方，不换行（white-space: nowrap）
- 当前选中项添加 aria-current="page" 和 class="active"，兼顾可访问性与样式控制
确保三段式父容器结构
底部导航要“自然落底”，前提是整体页面采用 column 布局并预留空间：
- 根容器（如 body）设 display: flex; flex-direction: column; min-height: 100vh
- 内部顺序严格为：
- main 必须设置 flex: 1，它会主动撑开剩余高度，把 nav “托”到底部
- 避免在 nav 外再套一层 div，否则破坏 flex 子项直系关系，分配失效
导航项等分与对齐方式
子项水平铺开需兼顾兼容性与视觉一致性：
- nav 容器启用 display: flex，不设 justify-content: space-around（Safari 对 button 子项支持差）
- 每个导航项设 flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center
- 禁用 flex-shrink，防止 iOS 键盘弹出时导航被压缩变形
- 高度统一用固定值（如 60px），配合 padding-bottom: env(safe-area-inset-bottom) 留出安全区
结构搭好后，样式和交互才有稳定载体。不追求花哨动效，先让布局在各端稳住位置、不遮内容、不被裁切——这才是移动端底部导航真正落地的第一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
