导航栏必须用<nav><ul>结构，对.nav-list设display: flex并清除默认样式，子项<li>用display: flex包裹<a>，所有链接加min-width: 0；汉堡菜单用max-height过渡而非height: auto或display: none；左右混排用margin-left: auto更可靠；子项需flex-shrink: 0防压缩；断点优先用em；下拉菜单用position: absolute定位。
导航栏结构必须用 <nav><ul>，别直接给 <nav> 加 display: flex
直接对 <nav> 设置 display: flex 是最常见错误——它会破坏语义结构，导致屏幕阅读器无法识别菜单项，且后续添加下拉、焦点管理、aria-expanded 等无障碍逻辑时无从下手。
正确结构是：<nav aria-label="主导航"><ul class="nav-list"><li><a href="#">首页</a></li></ul></nav>。然后只对 .nav-list 应用 display: flex，并清除默认 margin、padding 和 list-style。
关键点：
-
.nav-list必须设flex-direction: row（默认值，可不写），子项<li>用display: flex包裹<a>，避免文字换行或基线错位 - 所有
<a>或按钮类导航项需加min-width: 0，否则 Safari 下长链接会撑破容器 - 不要用
float或inline-block—— 它们不响应flex的空间分配，还会残留空白符干扰对齐
移动端收起菜单时，用 max-height + overflow: hidden 做过渡，别碰 height: auto
纯 CSS 实现汉堡菜单展开动画时，height: auto 无法触发 CSS transition，这是卡顿或“闪现”的根本原因。
立即学习“前端免费学习笔记（深入）”；
正确做法是：初始状态设 .nav-list { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-in-out; }，激活后改为 max-height: 300px（取足够容纳全部项的高度，如 6 项 × 48px ≈ 300px）。
注意：
- 别用
display: none切换——它不可过渡，且会让键盘焦点丢失 - 避免
transform: translateY()隐藏菜单，屏幕阅读器可能仍读取内容 - 若用 JS 控制，务必同步设置
aria-expanded="true/false"和aria-controls属性
左右对齐混排时，别依赖 justify-content: space-between，用 margin-left: auto 更可靠
当导航栏需要左对齐 Logo、右对齐登录按钮、中间是菜单列表时，justify-content: space-between 在项数变化（比如用户未登录时隐藏登录按钮）时会失衡——两头空荡，中间挤成一团。
更可控的写法是：
- 让
.nav-list保持display: flex，但不设justify-content - 把 Logo 放在
<ul>外（或作为第一个<li>），登录按钮放在<ul>外（或最后一个） - 对中间的
<ul>加margin-left: auto推到右侧，或对登录按钮加margin-left: auto - 若需等宽菜单项，用
flex: 0 0 calc(100% / 4)+min-width: 120px，而非flex: 1（后者会压缩文字）
Flex 子项必须加 flex-shrink: 0，否则小屏下文字被压扁
默认情况下，Flex 子项的 flex-shrink: 1 允许被压缩。在中等宽度屏幕（比如 iPad 横屏）下，菜单项文字会被强行缩窄甚至换行，造成可读性灾难。
解决方法很简单：给每个导航项（<li> 或包裹它的容器）加 flex-shrink: 0，再配合 white-space: nowrap 和 overflow: hidden + text-overflow: ellipsis 保底线。
额外提醒：
- 别在
<nav>上设overflow: hidden——它会截断下拉菜单或侧滑面板 - 媒体查询断点优先用
em（如@media (max-width: 48em)），比像素值更能适配缩放和不同设备渲染差异 - 如果用了下拉菜单，
.dropdown-menu必须设position: absolute并配合top: 100%和left: 0，否则脱离文档流后定位漂移
