使用flex-wrap与justify-content结合可实现响应式导航栏：1. HTML结构包含logo和导航链接；2. .navbar设flex-wrap: wrap允许换行；3. .nav-links用justify-content控制对齐方式；4. 媒体查询在768px以下改为垂直布局，提升移动端体验。
使用CSS Flexbox制作响应式导航栏时，flex-wrap 与 justify-content 的结合能有效控制导航项在不同屏幕尺寸下的排列方式和对齐效果。通过合理设置这两个属性，可以让导航栏在桌面端横向展开、居中或靠右对齐，在移动端自动换行显示，提升用户体验。
1. 基础结构：HTML 导航结构
先构建一个简单的导航结构：
<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>
2. 使用 flex-wrap 允许换行
flex-wrap: wrap 让子元素在空间不足时自动换行，是实现响应式布局的关键。
给导航容器设置：
立即学习“前端免费学习笔记（深入）”；
.navbar {
display: flex;
flex-wrap: wrap;
padding: 1rem;
}
这样当屏幕变窄时，导航项可以向下延伸，避免溢出或挤压。
3. justify-content 控制主轴对齐方式
justify-content 决定项目在主轴上的分布方式。常见值包括：
- flex-start：左对齐（默认）
- flex-end：右对齐
- center：居中对齐
- space-between：两端对齐，项目间间距相等
- space-around：项目周围留有空间
例如让导航链接居中显示：
.nav-links {
display: flex;
justify-content: center;
list-style: none;
margin: 0;
padding: 0;
flex: 1;
}
</font>
4. 响应式断点适配
配合媒体查询，在小屏幕上让导航更清晰：
@media (max-width: 768px) {
.navbar {
flex-direction: column;
text-align: center;
}
.nav-links {
flex-direction: column;
justify-content: flex-start;
}
.nav-links li {
margin: 0.5rem 0;
}
}
此时 flex-wrap 虽未显式声明，但 flex-direction: column 下换行行为自然改变，内容垂直堆叠。
基本上就这些。灵活运用 flex-wrap 和 justify-content，再结合媒体查询，就能做出简洁高效的响应式导航栏。不复杂但容易忽略细节。
