使用Flexbox构建响应式菜单，桌面端水平布局，移动端通过汉堡按钮切换垂直菜单。1. 用display: flex实现导航项对齐；2. 添加.hamburger按钮，在max-width: 768px时显示；3. JavaScript控制.menu的active类切换显示状态；4. 移动端.menu设为flex-direction: column。关键细节包括隐藏默认列表符号、设置cursor: pointer及合理使用媒体查询，确保交互流畅与布局自适应。
响应式菜单在现代网页设计中非常常见，特别是在移动端优先的开发理念下。将CSS响应式菜单切换与Flexbox布局结合，既能实现美观的水平导航栏，也能在小屏幕下切换为汉堡菜单，提升用户体验。
使用Flexbox构建基础导航栏
Flexbox非常适合用于创建灵活、对齐良好的导航菜单。通过display: flex，可以轻松让菜单项水平排列并自动分配空间。
示例代码：
nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
padding: 1rem;
}
nav ul {
display: flex;
list-style: none;
gap: 1.5rem;
margin: 0;
padding: 0;
}
nav a {
color: white;
text-decoration: none;
}
添加汉堡菜单切换按钮
在小屏幕上，隐藏原始菜单，显示一个汉堡图标。点击该图标时，展开垂直菜单。这可以通过JavaScript控制类名切换，配合CSS实现动画效果。
立即学习“前端免费学习笔记（深入）”；
HTML结构示例：
响应式断点与菜单切换逻辑
使用媒体查询定义何时切换为移动视图。同时，用JavaScript为汉堡按钮绑定点击事件。
CSS关键部分：
.menu {
display: flex;
}
.hamburger {
display: none;
font-size: 1.5rem;
cursor: pointer;
}
@media (max-width: 768px) {
.hamburger {
display: block;
}
.menu {
display: none;
flex-direction: column;
width: 100%;
background-color: #444;
}
.menu.active {
display: flex;
}
}
JavaScript控制菜单开关：
const hamburger = document.getElementById('hamburger');
const menu = document.querySelector('.menu');
hamburger.addEventListener('click', () => {
menu.classList.toggle('active');
});
这样，在桌面端菜单保持水平展示，利用Flexbox自然对齐；在移动端点击汉堡图标即可展开垂直堆叠的菜单，依然使用Flexbox管理子项布局。
基本上就这些，结构清晰，样式简洁，适配性强。关键是利用Flexbox的弹性布局优势，再结合媒体查询和简单脚本完成交互。不复杂但容易忽略细节，比如flex-direction: column在移动端的应用，或确保按钮在小屏才可见。处理好这些，响应式菜单就能流畅工作。
