使用 justify-content: space-between 可实现导航栏子元素均匀分布，首尾贴边、中间留白。1. 设置 flex 布局并应用 space-between，使导航项自动分配间距；2. 将内容分为左右区块（如 Logo 与菜单），提升布局控制灵活性；3. 避免子元素拉伸或宽度过大破坏间距，注意子元素数量对效果影响；4. 结合媒体查询优化响应式，在小屏切换为纵向排列提升可读性。合理运用可构建简洁实用的导航栏。
使用 justify-content: space-between 可以让导航栏的子元素均匀分布在容器中，首尾元素分别贴住左右边缘，中间自动留白。这种方式特别适合构建简洁、响应式强的导航布局。
1. 基本结构与样式设置
确保导航栏使用 Flex 布局，并应用 space-between 实现自动间距分配。
示例代码：.nav {
display: flex;
justify-content: space-between;
align-items: center; /* 垂直居中对齐 */
padding: 0 20px;
background-color: #fff;
border-bottom: 1px solid #ddd;
}
.nav-item {
list-style: none;
}这样，第一个导航项靠左，最后一个靠右，中间空隙平均分布。
2. 控制内容分组更灵活
如果导航栏包含品牌 Logo 和菜单项（如左侧 Logo，右侧多个链接），可以将内容分为两个区块来更好地控制布局。
立即学习“前端免费学习笔记（深入）”；
HTML 结构示例：<nav class="nav">
<div class="nav-left">Logo</div>
<div class="nav-right">
<a href="#">首页</a>
<a href="#">关于</a>
<a href="#">联系</a>
</div>
</nav>CSS 样式：.nav {
display: flex;
justify-content: space-between;
padding: 10px 20px;
}
.nav-left, .nav-right {
display: flex;
gap: 20px; /* 菜单项之间保持间距 */
}这种结构在移动端或屏幕变小时更容易调整显示方式。
3. 避免常见问题
使用 space-between 时注意以下几点，避免布局错乱：
- 确保父容器是 flex 容器（display: flex）
- 子元素不能设置 width: 100% 或过度拉伸，否则会破坏间距效果
- 若只有两个子元素，它们会自然贴边，效果最明显；超过三个时，中间空白会被平分
- 在小屏幕上可配合 @media 使用，切换为 justify-content: center 或其他方式
4. 响应式优化建议
当屏幕变窄时，文字拥挤可能影响体验。可通过媒体查询调整布局。
@media (max-width: 768px) {
.nav {
flex-direction: column;
text-align: center;
}
.nav-right a {
margin: 5px 0;
}
}这样在手机端堆叠显示，提升可读性。
基本上就这些。合理使用 justify-content: space-between，结合分组和响应式设计，能让你的导航栏既美观又实用。不复杂但容易忽略细节。
