使用 justify-content: space-between 可轻松实现导航栏两端对齐，解决传统布局在宽度变化时的对齐难题，使首尾菜单项分别贴靠容器左右边缘，中间项自动等距分布。
在使用 CSS Flex 布局制作导航栏时，如果希望两端的菜单项分别贴在最左和最右，实现“两端对齐”，justify-content: space-between 是最简单有效的解决方案。
为什么导航栏两端对齐会困难？
传统的浮动布局或 inline-block 难以精确控制元素在容器中的水平分布。当导航项数量不固定，或者容器宽度变化时，容易出现不对齐、间距不均的问题。Flex 布局通过主轴对齐方式可以轻松解决这类问题。
使用 justify-content: space-between 实现两端对齐
将父容器设置为 flex，并使用 justify-content: space-between，可以让第一个子元素靠左，最后一个子元素靠右，中间的元素平均分配剩余空间。
- 给导航容器设置 display: flex
- 添加 justify-content: space-between
- 确保容器有足够宽度（如 100%）
示例代码：
立即学习“前端免费学习笔记（深入）”；
<nav class="navbar">
<div class="nav-item">首页</div>
<div class="nav-item">产品</div>
<div class="nav-item">关于我们</div>
<div class="nav-item">登录</div>
</nav>
<style>
.navbar {
display: flex;
justify-content: space-between;
padding: 0 20px;
background: #f5f5f5;
}
.nav-item {
padding: 10px 15px;
}
</style>
在这个例子中，“首页”会贴在最左边，“登录”会贴在最右边，中间两项自动等距分布。
注意事项与常见问题
如果只有一两个导航项，space-between 依然有效，但视觉上可能显得太分散。此时可结合其他属性微调：
- 使用 min-width 控制最小间距
- 在多项目时用 flex-grow 均匀拉伸中间区域
- 配合 text-align 或 margin 自定义对齐行为
基本上就这些。justify-content: space-between 是实现导航栏两端对齐最直接的方式，无需计算宽度或使用伪元素，灵活且响应式友好。
