响应式导航栏通过Flexbox实现弹性布局，结合媒体查询适配不同屏幕。首先使用display: flex对齐logo与菜单，justify-content和align-items控制主轴与交叉轴排列；在小屏下通过@media设置断点（如768px），将.nav-links改为flex-direction: column垂直堆叠，并隐藏菜单；添加JavaScript控制显隐及汉堡图标提升交互体验；同时引入ARIA属性与焦点管理增强可访问性，最终实现结构清晰、跨设备兼容的导航组件。
响应式导航栏是现代网页设计的基础组件。使用CSS Flexbox结合媒体查询，可以轻松创建在不同设备上都能良好显示的导航栏。核心思路是利用Flexbox的弹性布局特性控制导航项的排列方式，再通过媒体查询适配不同屏幕尺寸。
使用Flexbox构建基础导航结构
Flexbox让水平对齐、垂直居中和空间分配变得简单。先构建一个语义清晰的导航结构：
<nav class="navbar">
<div class="logo">Logo</div>
<ul class="nav-links">
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">联系</a></li>
</ul>
</nav>
然后用Flexbox进行布局：
- 容器设为flex：给 .navbar 设置 display: flex，实现整体弹性布局
- 主轴对齐：使用 justify-content: space-between 让logo和菜单项分布在两端
- 垂直居中：align-items: center 确保所有元素在交叉轴上居中
- 列表项横向排列：将 .nav-links 设为 display: flex，使菜单项水平排列
用媒体查询适配移动设备
在小屏幕上，水平排列的菜单会挤在一起甚至换行错乱。通过媒体查询切换为垂直堆叠或汉堡菜单：
立即学习“前端免费学习笔记（深入）”；
- 设置断点：通常在 768px 或 600px 触发移动端样式
- 改变flex方向：在小屏下将 .nav-links 的 flex-direction 改为 column
- 隐藏菜单默认收起：初始设为 display: none，配合JavaScript实现点击展开
- 添加汉堡图标：用伪元素或额外标签创建三道杠图标，提升用户体验
示例代码片段：
@media (max-width: 768px) {
.nav-links {
flex-direction: column;
background: #333;
width: 100%;
}
.nav-links li {
text-align: center;
padding: 15px 0;
}
}
增强交互与可访问性
一个完善的响应式导航不仅要美观，还要易用：
- 添加toggle按钮：用JavaScript控制 .nav-links 的显示与隐藏
- 焦点管理：确保键盘用户能通过Tab键遍历所有链接
- ARIA属性：为按钮添加 aria-expanded 和 aria-controls 提高可访问性
- 过渡动画：加入 height 或 opacity 的transition，让展开更自然
基本上就这些。Flexbox解决布局问题，媒体查询处理适配，再加上一点JavaScript控制显隐，就能做出流畅的响应式导航。关键是理解flex容器和项目的行为，再根据实际需求调整断点和样式。不复杂但容易忽略细节。
