移动端导航栏需兼顾断点切换逻辑、折叠状态可控性及语义结构保留；nav 应专注语义与定位，ul.nav-links 才是弹性容器；用 gap 替代 margin 控制间距；移动端折叠需 js 配合 aria 属性实现可访问汉堡菜单。
移动端导航栏不是“加个 flex 就完事”，关键在于**断点切换逻辑是否干净、折叠状态是否可控、语义结构是否保留**。直接在 nav 上写 display: flex 然后堆 @media，大概率会在小屏下出现溢出、焦点丢失或屏幕阅读器无法识别的问题。
为什么不能只给 nav 设 display: flex
很多开发者一上来就给 <nav></nav> 加 display: flex，结果发现菜单项没排成一行，或者汉堡图标和 logo 挤在一起——这是因为忽略了内部语义层级。真正的弹性容器应该是包裹所有导航项的父级，比如 <ul class="nav-links"></ul>，而不是外层 <nav></nav>（它只是语义容器，不该承担布局职责）。
-
nav应专注语义与整体定位（如position: fixed、top: 0），不参与子项排列 -
ul.nav-links才是真正的弹性容器，设display: flex+flex-wrap: nowrap - 若把
flex错加到li或a上，每个项会变成独立弹性盒子，彼此无关联，根本排不成行
gap 替代 margin-right 是必须的
用 margin-right 给每个 li 或 a 加间距，会在最后一个元素上多出多余空白，动态增减菜单项时更难维护。而 gap 是 Flexbox 原生属性，只作用于项目之间，首尾不生效。
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
- 写法：在
ul.nav-links上加gap: 1.25rem（推荐 rem 或 em，适配缩放） - 兼容性注意：
gap在 Safari 14.1+ 和 Chrome 84+ 完全支持；旧版 iOS Safari 需降级为justify-content: space-between+ 显式控制首尾留白 - 别在
li上同时设gap和margin，容易叠加导致间距失控
移动端折叠不是靠 flex-wrap: wrap 实现的
flex-wrap: wrap 会让菜单项在空间不足时自动折行，但这是“视觉折叠”，不是用户想要的汉堡菜单。真正在移动端可用的方案，是用媒体查询隐藏原导航，再用 JavaScript 控制 .mobile-menu 的显隐。
- 基础断点：用
@media (max-width: 768px)切换样式 - 隐藏桌面导航：
.nav-links { display: none; }，同时显示.hamburger和.mobile-menu -
.mobile-menu本身也应是display: flex+flex-direction: column，保证垂直堆叠 - 务必加
aria-expanded和aria-controls属性，否则屏幕阅读器无法感知菜单状态
Flex 项目宽度控制要慎用 flex: 1
想让所有菜单项等宽？直接写 flex: 1 很危险——它等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%，而 flex-basis: 0% 会清空文字自然宽度，在中英文混排或图标+文字组合下，可能导致文字被压缩甚至换行。
- 安全做法：对纯文字项用
flex: 0 0 auto（默认值），靠justify-content分配空白 - 若必须等宽，优先用
grid或 JS 计算宽度，Flex 下建议设flex-basis: 25%（配合 4 项）而非0 - logo 或搜索框这类固定宽度项，明确设
flex: 0 0 120px，避免被拉伸变形
最常被忽略的不是写法，而是语义和可访问性：没有 <nav aria-label="主导航"></nav>，没有 role="menu" 和 role="menuitem"，再漂亮的 Flex 布局对辅助技术来说也等于不存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
