使用 flex-wrap: wrap 允许导航项换行，justify-content 控制每行对齐方式，结合媒体查询优化不同屏幕布局，实现响应式导航菜单。
在响应式网页设计中，使用 CSS Flexbox 实现导航菜单的水平折行非常实用。当屏幕变窄时，让导航项自动换行而不是溢出容器，能提升移动端体验。关键在于 flex-wrap: wrap 与 justify-content 的合理搭配。
1. 使用 flex-wrap: wrap 允许换行
默认情况下，Flex 容器中的子元素会尽量排在一行。要让导航菜单项在空间不足时自动折行，需设置：
flex-wrap: wrap;这样，当容器宽度不够容纳所有菜单项时，后面的项就会自动换到下一行。
2. justify-content 控制主轴对齐方式
justify-content 决定菜单项在每一行内的水平分布方式。常见取值包括：
立即学习“前端免费学习笔记（深入）”；
- flex-start：左对齐（默认）
- center：居中对齐
- flex-end：右对齐
- space-between：两端对齐，项目间间距相等
- space-around：每个项目周围有相等空间
- space-evenly：项目间及边缘间距完全相等
即使启用了换行，每一行内的项目仍会按此规则排列。
3. 实际代码示例
以下是一个响应式导航菜单的基本实现：
nav {
display: flex;
flex-wrap: wrap;
justify-content: center; /* 所有行都居中 */
background: #333;
}
nav a {
flex: 1 1 150px; / 可伸缩，最小宽度约150px时换行 /
text-align: center;
padding: 1rem;
color: white;
text-decoration: none;
}
在这个例子中，每个菜单项最小宽度为 150px，当容器放不下时自动换行，且每行内容居中对齐。
4. 配合媒体查询优化体验
可结合媒体查询进一步控制不同屏幕下的表现：
@media (max-width: 600px) {
nav {
justify-content: flex-start; /* 小屏时改为左对齐 */
}
}
小屏幕上如果用 space-between 或 center，可能导致单个菜单项过于分散或偏移，改用 flex-start 更紧凑清晰。
基本上就这些。通过 flex-wrap 和 justify-content 的组合，既能实现自动折行，又能灵活控制布局对齐，是构建响应式导航菜单的核心技巧。不复杂但容易忽略细节。
