导航栏用 display: flex 的核心是语义化结构（）+ .nav-list 设 flex 布局，配合媒体查询切换 column、焦点管理、无障碍属性及 overflow 控制实现响应式与可访问性。
导航栏用 display: flex 布局的核心结构
导航栏本质是一个水平排列的容器，display: flex 天然适合——它让子元素（如 <li> 或 <a></a>）默认沿主轴（flex-direction: row）排布，且能自动分配空间。关键不是“怎么写 flex”，而是避免把 <nav></nav> 直接设为 flex 后忽略内部语义结构。常见错误是把 <ul></ul> 丢掉，用一堆 <div> 拼导航，结果语义丢失、屏幕阅读器无法识别。
<p>推荐结构：</p>
<pre class='brush:php;toolbar:false;'><nav>
<ul class="nav-list">
<li><a href="#home">首页</a></li>
<li><a href="#about">关于</a></li>
<li><a href="#contact">联系</a></li>
</ul>
</nav></pre>
<p>然后对 <code>.nav-list 应用 flex：
-
list-style: none清除默认圆点 -
margin: 0; padding: 0清除默认内外边距 -
display: flex启用弹性布局 -
align-items: center垂直居中文字与图标（若存在）
响应式断点下如何用 @media 切换导航形态
纯 flex 布局在小屏会挤成一行导致文字重叠或溢出，必须配合媒体查询。重点不是“隐藏菜单”，而是“切换布局模式”：桌面端用 flex-direction: row，移动端改用 flex-direction: column 并配合 position: absolute 或 transform: translateX() 实现侧滑菜单——但更轻量的做法是直接收起为汉堡按钮 + flex-direction: column 展开。
立即学习“前端免费学习笔记（深入）”；
关键点：
- 移动端先设
.nav-list { flex-direction: column; }，再用max-height+overflow: hidden配合transition做展开动画（注意：height: auto无法过渡，得用max-height） - 不要对
<nav></nav>自身加display: none，否则语义和可访问性全丢；应控制.nav-list的显示状态 - 使用
aria-expanded和aria-controls属性配合 JS 切换，确保屏幕阅读器能感知状态变化
justify-content 和 flex-grow 在导航项对齐中的实际效果差异
导航栏常需“左对齐 logo + 右对齐菜单项”，或“均匀撑满整个宽度”。这时不能只靠 justify-content: space-between 硬塞，因为中间可能有搜索框、用户头像等非导航项，需要更精细控制。
真实场景建议组合用法：
- 用
justify-content: space-between分隔左右区域（如 logo 在左，登录按钮在右） - 对中间的
<ul></ul>单独设置display: flex，再用margin-left: auto推到右侧（比justify-content: flex-end更可控） - 若要菜单项等宽，不用
flex: 1（会导致文字换行或缩放异常），改用flex: 0 0 calc(100% / 4)配合min-width限制最小宽度 -
flex-grow: 1仅适用于“填满剩余空间”的单个元素（如搜索框），不适用于多个导航项
移动端点击穿透、焦点管理与 focus-visible 的兼容处理
Flex 导航在移动端最易被忽略的是交互细节：点击汉堡按钮后，菜单弹出，但键盘用户按 Tab 键时焦点可能仍停留在已隐藏的导航项上，或焦点顺序错乱。这不是 flex 的问题，而是没做焦点流控制。
必须做的几件事：
- 菜单关闭时，给所有
.nav-list a加tabindex="-1"，打开时移除 - 菜单打开后，首次聚焦应落到第一个
<a></a>上（用.focus()） - 用
:focus-visible替代:focus控制焦点样式，避免鼠标点击时出现难看的轮廓线（Chrome/Firefox 支持，Safari 需加:-webkit-focus-ring-color回退） - 禁止滚动穿透：菜单展开时给
加overflow: hidden，但记得恢复，否则返回页面后无法滚动
flex 布局本身不解决交互逻辑，它只是让结构更可控；真正决定体验的是这些边界条件的处理是否严密。
