justify-content 控制 Flexbox 主轴上子元素的对齐与间距分配。默认主轴为水平方向，flex-start（默认）使项目左对齐，flex-end 右对齐，center 居中排列，space-between 首尾贴边、中间间距均分，space-around 项目两侧间距相等、边缘空白为中间一半，space-evenly 所有间距完全相等。实际应用如导航栏用 space-between 实现两端对齐，按钮组用 center 居中显示，需均匀分布时用 space-evenly。当设置 flex-direction: column 时，主轴变为垂直方向，justify-content 相应控制纵向对齐，如 vertical-stack 使用 space-around 实现上下均匀间隙。掌握该属性需理解主轴方向及其空间分配逻辑。
在使用 CSS Flexbox 布局时，justify-content 是控制主轴（main axis）上子元素空间分配的关键属性。它决定了容器内 flex 项目在主轴方向上的对齐方式和空白区域的分布。
justify-content 的常用取值及效果
flex 容器的主轴默认是水平向右的（flex-direction: row），以下是对不同 justify-content 值的说明：
- flex-start：项目向主轴起点对齐，所有间隙留在末尾。这是默认值。
- flex-end：项目向主轴终点对齐，间隙在开头。
- center：项目在主轴居中，前后间隙相等。
- space-between：项目均匀分布，第一个项目在起点，最后一个在终点，中间间距相等。
- space-around：每个项目两侧的间隔相等，视觉上两边的空白是中间的一半。
- space-evenly：项目间的间距完全相等，包括与容器边缘的距离。
实际应用场景示例
假设你有一个导航栏，包含几个菜单项，希望它们平分容器宽度并两端对齐：
.nav {
display: flex;
justify-content: space-between;
}
如果想让所有按钮在容器中居中显示：
立即学习“前端免费学习笔记（深入）”；
.button-group {
display: flex;
justify-content: center;
}
当需要按钮之间和边距都保持一致时，用 space-evenly 更合适：
.spaced-buttons {
display: flex;
justify-content: space-evenly;
}
注意主轴方向的影响
justify-content 始终作用于主轴。如果你设置了 flex-direction: column，主轴变为垂直方向，那么 justify-content 将控制垂直方向的对齐。
例如：
.vertical-stack {
display: flex;
flex-direction: column;
justify-content: space-around;
}
此时项目在纵向排列，上下留出均匀空隙。
基本上就这些。掌握 justify-content 能帮你快速实现各种对齐布局，关键是理解主轴方向和每个取值的空间分配逻辑。
