使用 display: flex 实现响应式导航需在容器设 flex 布局，配合 justify-content、flex-wrap 及媒体查询控制布局；小屏改 column 方向并隐藏菜单；注意兼容性前缀、可访问性及触摸体验。
用 display: flex 让导航项水平排列并自动分配空间
默认的 <ul><li></ul> 导航结构在块级流中会垂直堆叠，必须显式启用 Flex 布局才能实现一行对齐、等宽或自适应伸缩。关键不是加 flex 就完事，而是要控制主轴方向、换行行为和对齐方式：
-
display: flex必须写在容器（如<nav></nav>或<ul></ul>）上，子元素（<li>）自动成为 flex 项目 - 加
flex-wrap: wrap是为后续响应式留余地——小屏时允许折行，避免溢出或横向滚动条 - 用
justify-content: space-between或space-around替代flex-start，能更自然地撑满容器宽度，尤其当导航项数量不固定时 - 别忘了给
<a></a>设置display: block，否则点击热区只在文字区域，影响移动端体验
用 @media 查询在小屏下切换为汉堡菜单 + flex-direction: column
纯靠 flex-wrap 折行不够可靠：窄屏下文字可能被截断，且缺乏交互入口。主流做法是小屏隐藏原导航，用按钮触发折叠菜单。核心动作是切换 flex 容器的主轴方向和可见性：
- 在
@media (max-width: 768px)内，把导航容器设为flex-direction: column，让所有<li>垂直堆叠 - 用
position: absolute或transform: translateX()隐藏菜单，默认opacity: 0; visibility: hidden，再配合transition实现滑入动画 - 汉堡按钮本身需用
span模拟三横线，并通过:checked+<input type="checkbox">控制显隐（无 JS 方案），或用aria-expanded配合 JS 切换display/height - 务必加
viewportmeta 标签：<meta name="viewport" content="width=device-width, initial-scale=1">，否则媒体查询在移动浏览器中可能失效
处理 flex 在旧版 Safari 和 IE 中的兼容性断点
Flexbox 虽已广泛支持，但 Safari 9–10 和 IE 10–11 对 flex-wrap、gap 和某些 justify-content 值支持不一致，容易导致布局错乱：
- 避免使用
gap，改用margin控制导航项间距；IE 完全不支持gap，Safari 14.1 才开始支持 - IE 10–11 要求带
-ms-前缀：display: -ms-flexbox、-ms-flex-wrap: wrap，且不支持flex: 1等简写，需拆成flex-grow/flex-shrink/flex-basis - Safari 9–10 对
justify-content: space-between在单行 flex 容器中表现异常，可改用justify-content: space-around或手动设置margin - 测试时重点看 iPhone SE（320px）、iPad 竖屏（768px）和 Android 小屏设备的实际渲染，不要只依赖 Chrome DevTools 的模拟尺寸
导航焦点与键盘可访问性常被忽略的细节
响应式导航栏一旦用 display: none 隐藏菜单，屏幕阅读器和键盘 Tab 会直接跳过整个区块，导致残障用户无法操作：
立即学习“前端免费学习笔记（深入）”；
- 隐藏菜单时用
visibility: hidden; height: 0; overflow: hidden替代display: none，保持 DOM 可聚焦 - 汉堡按钮必须有
role="button"和aria-label="Toggle navigation"，菜单容器加role="navigation" - 展开后，用 JavaScript 将焦点移到第一个
<a></a>上；关闭时焦点应回到汉堡按钮，形成逻辑闭环 - 按
Esc键应关闭菜单，Tab 键在菜单内循环，Shift+Tab 返回上一个可聚焦元素
