CSS justify-content 属性

Begindev 编辑部 March 25, 2026

justify-content 属性决定了弹性项目在弹性容器的主轴 (main axis) 上如何对齐。

本质上，当弹性项目没有占据主轴上的所有可用空间时，它负责控制这些剩余空间的分配。

在深入了解具体细节之前，请记住主轴是由 flex-direction 属性决定的。

默认情况下，flex-direction 设置为 row，使主轴呈现水平方向。
如果 flex-direction 设置为 column，主轴就会变成垂直方向。
justify-content 属性的具体行为会根据主轴的方向而发生改变。

1. 理解 justify-content 的属性值

justify-content 属性接受几个不同的值，每个值都提供了一种在主轴上对齐和分配弹性项目的独特方式。

让我们详细探索每一个值：

1.1 flex-start

描述：这是默认值。它将弹性项目对齐到主轴的起点。
行为：项目被挤压向容器的起始位置。任何多余的空间都被放置在末尾。
示例：想象一个水平的弹性容器（flex-direction: row）。使用 justify-content: flex-start，所有项目都会靠左对齐。如果容器是垂直的（flex-direction: column），项目则会靠顶部对齐。

.container {
  display: flex;
  justify-content: flex-start; /* 默认值 */
  flex-direction: row; /* 或 column */
}

1.2 flex-end

描述：将弹性项目对齐到主轴的终点。
行为：项目被挤压向容器的末尾位置。多余的空间被放置在起始位置。
示例：在水平弹性容器中设置 justify-content: flex-end，项目会靠右对齐。在垂直容器中，它们会靠底部对齐。

.container {
  display: flex;
  justify-content: flex-end;
  flex-direction: row; /* 或 column */
}

1.3 center

描述：将弹性项目在主轴上居中对齐。
行为：项目在容器中间紧凑排列。等量的多余空间被放置在起点和终点的两侧。
示例：在水平弹性容器中，项目将水平居中。在垂直容器中，它们将垂直居中。

.container {
  display: flex;
  justify-content: center;
  flex-direction: row; /* 或 column */
}

1.4 space-between

描述：沿主轴均匀分布弹性项目，第一个项目对齐到起点，最后一个项目对齐到终点。
行为：剩余的空间在项目之间平均分配。这意味着第一个项目之前或最后一个项目之后没有多余的空间。
示例：如果你在水平弹性容器中有三个项目，第一个将在左边缘，最后一个在右边缘，中间的项目将居中于它们之间。

.container {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}

1.5 space-around

描述：沿主轴均匀分布弹性项目，每个项目周围都有相等的空间。
行为：每个项目两侧的空间量相同。这意味着容器起点和终点的空间是项目之间空间的一半大小。
示例：使用相同的三个项目，每个项目两侧将有相等的空间。容器起点和终点的空间会比项目之间的缝隙小。

.container {
  display: flex;
  justify-content: space-around;
  flex-direction: row;
}

1.6 space-evenly

描述：沿主轴均匀分布弹性项目，每个项目周围的空间相等，包括起点和终点的空间。
行为：第一个项目之前、项目之间以及最后一个项目之后的空间都是相等的。
示例：在水平弹性容器中有三个项目时，第一个项目之前的空间、第一和第二项目之间的空间、第二和第三项目之间的空间，以及第三个项目之后的空间将完全相同。

.container {
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
}

2. 演示与实战案例

让我们使用一个简单的 HTML 结构，通过实战案例来演示这些 justify-content 值：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

以及一些用于样式化项目的基础 CSS：

.container {
  display: flex;
  width: 500px;
  height: 200px;
  background-color: #eee;
  border: 1px solid #ccc;
}

.item {
  width: 80px;
  height: 80px;
  background-color: #3498db;
  color: white;
  text-align: center;
  line-height: 80px;
  margin: 5px;
}

现在，我们可以将不同的 justify-content 值应用到 .container 类，以查看对项目对齐方式的影响。请尝试将 HTML 和基础 CSS 粘贴到 HTML 文件中，然后修改 .container CSS 规则中的 justify-content 属性来观察不同的对齐效果：

justify-content: flex-start: 项目将对齐到容器的左边缘。
justify-content: flex-end: 项目将对齐到容器的右边缘。
justify-content: center: 项目将在容器内水平居中。
justify-content: space-between: 第一个项目将在左边缘，最后一个项目在右边缘，中间的项目将在它们之间均匀隔开。
justify-content: space-around: 每个项目周围将有相等的空间，但边缘的空间是项目之间空间的一半大小。
justify-content: space-evenly: 项目之前、之间和之后的空间将全部相等。

为了演示 flex-direction 的影响，请修改 .container CSS 规则，加入 flex-direction: column;，并确保调整容器的 height，使其大于所有项目的组合高度。然后，观察 justify-content 属性是如何在垂直方向上对齐项目的。