CSS中的justify-content属性详解

描述
justify-content是Flexbox布局中的一个关键属性，用于定义主轴（main axis）上网格项或弹性项的对齐方式。它控制项目在容器内的分布和空间分配，是实现灵活布局的核心属性之一。

详细讲解

1. 基本概念理解

• 主轴方向：justify-content沿着flex容器的主轴工作
• 需要先设置display: flex或display: grid创建flex容器或grid容器
• 主轴方向由flex-direction决定（row=水平，column=垂直）

2. 属性值详解

flex-start（默认值）

• 项目从主轴起点开始排列
• 所有项目紧挨着容器起始边缘
• 剩余空间留在末尾

.container {
  display: flex;
  justify-content: flex-start; /* 左对齐 */
}

flex-end

• 项目从主轴末尾开始排列
• 所有项目紧挨着容器结束边缘
• 剩余空间留在开头

.container {
  display: flex;
  justify-content: flex-end; /* 右对齐 */
}

center

• 项目在主轴居中排列
• 剩余空间平均分配在两侧
• 最常用的居中布局方式

.container {
  display: flex;
  justify-content: center; /* 居中对齐 */
}

space-between

• 项目均匀分布在主轴
• 第一个项目在起点，最后一个在终点
• 项目之间间距相等

.container {
  display: flex;
  justify-content: space-between; /* 两端对齐 */
}

space-around

• 项目均匀分布，每个项目两侧有相等空间
• 项目之间的间隔是项目与容器边缘间隔的两倍

.container {
  display: flex;
  justify-content: space-around; /* 环绕分布 */
}

space-evenly

• 所有间隔完全相等
• 项目之间、项目与边缘之间的间隔都相同

.container {
  display: flex;
  justify-content: space-evenly; /* 均匀分布 */
}

3. 实际应用示例

导航菜单布局

.nav {
  display: flex;
  justify-content: space-between; /* 品牌logo左，菜单项右 */
  padding: 0 20px;
}

卡片居中显示

.card-container {
  display: flex;
  justify-content: center; /* 卡片水平居中 */
  align-items: center;    /* 垂直居中 */
  height: 100vh;
}

均匀分布的表单元素

.form-row {
  display: flex;
  justify-content: space-around; /* 表单项均匀分布 */
  margin-bottom: 15px;
}

4. 注意事项

• justify-content只在有剩余空间时生效
• 项目总宽度超过容器时，该属性无效
• 与align-items配合使用实现完美布局
• 在Grid布局中用法类似，控制网格轨道在容器内的分布