justify-content

Baseline 广泛可用 *

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 2015 年 9 月以来，该特性已在各大浏览器中可用。

* 此特性的某些部分可能存在不同级别的支持。

CSS 的 justify-content 属性定义了浏览器如何沿着弹性容器的主轴和网格容器及多列容器的行内轴在内容项之间和周围分配空间。

下面的交互式示例演示了如何使用网格布局来设置 justify-content 的一些值。

试一试

justify-content: start;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

justify-content: space-evenly;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  width: 220px;
  display: grid;
  grid-template-columns: 60px 60px;
  grid-auto-rows: 40px;
  row-gap: 10px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

语法

css

/* Positional alignment */
justify-content: center;
justify-content: start;
justify-content: end;
justify-content: flex-start;
justify-content: flex-end;
justify-content: left;
justify-content: right;

/* Normal alignment */
justify-content: normal;

/* Distributed alignment */
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
justify-content: stretch;

/* Overflow alignment (for positional alignment only)*/
justify-content: safe center;
justify-content: unsafe center;

/* Global values */
justify-content: inherit;
justify-content: initial;
justify-content: revert;
justify-content: revert-layer;
justify-content: unset;

值

start: 项目沿主轴线向对齐容器的起始边缘紧凑排列。
end: 项目沿主轴线向对齐容器的结束边缘紧凑排列。
flex-start: 项目沿弹性容器主轴的起始一侧，向对齐容器的起始边缘紧凑排列。这仅适用于弹性布局项目。对于非弹性容器子项的项目，此值的处理方式与 start 相同。
flex-end: 项目沿弹性容器主轴的末尾一侧，向对齐容器的结束边缘紧凑排列。这仅适用于弹性布局项目。对于非弹性容器子项的项目，此值的处理方式与 end 相同。
center: 项目沿主轴线向对齐容器的中心紧凑排列。
left: 项目向对齐容器的左边缘紧凑排列。如果属性的水平轴与行内轴不平行（例如设置了 flex-direction: column;），此值的行为类似于 start。
right: 项目向对齐容器的右边缘紧凑排列。如果属性的轴与行内轴（在网格容器中）或主轴（在弹性盒容器中）不平行，此值的行为类似于 start。
normal: 行为与 stretch 类似，但在具有非 auto 的 column-width 值的多列容器中，列将采用其指定的 column-width，而不是拉伸以填充容器。由于 stretch 在弹性容器中的行为与 start 类似，因此 normal 的行为也与 start 类似。
space-between: 项目在对齐容器中沿主轴均匀分布。每对相邻项目之间的间距相等。第一个项目与主轴起始边缘对齐，最后一个项目与主轴结束边缘对齐。
space-around: 项目在对齐容器中沿主轴均匀分布。每对相邻项目之间的间距相等。第一个项目之前和最后一个项目之后的空白空间等于每对相邻项目之间间距的一半。如果只有一个项目，它将被居中。
space-evenly: 项目在对齐容器中沿主轴均匀分布。每对相邻项目之间的间距、主轴起始边缘与第一个项目之间的间距、以及主轴结束边缘与最后一个项目之间的间距都完全相等。
stretch: 如果项目沿主轴的总尺寸小于对齐容器的尺寸，任何尺寸为 auto 的项目的大小都会等量（非按比例）增加，同时仍然遵循 max-height/max-width（或等效功能）施加的约束，使得项目总尺寸刚好填满对齐容器的主轴。

备注： 对于弹性盒子，stretch 值的行为与 flex-start 或 start 相同。这是因为在弹性盒子中，拉伸是由 flex-grow 属性控制的。
safe: 如果项目溢出对齐容器，则该项目将按照对齐模式为 start 的方式对齐。所需的对齐方式将不会被实现。
unsafe: 即使项目溢出对齐容器，所需的对齐方式也会被实现。与 safe 不同，safe 会忽略所需的对齐方式以防止溢出。

描述

justify-content 定义于 CSS 盒模型对齐模块中，适用于多列容器、弹性容器和网格容器。该属性不适用于块容器，也对其没有影响。

该属性与 align-content 属性共享许多关键字值，但并非全部！justify-content 不涉及基线对齐，因此不接受基线值。

在弹性布局中，该属性定义了正向可用空间如何在弹性项目之间或周围沿主轴分布。此属性影响一行中元素之间的空间，而不是行与行之间的空间。对齐是在应用了长度和自动外边距之后进行的，这意味着当一行中的一个或多个弹性项目的 flex-grow 因子大于 0 时，该属性没有效果，因为该行上没有可供分配的空间。此外，由于沿主轴的拉伸由 flex 控制，因此 stretch 值的行为与 flex-start 相同。

在网格布局中，此属性在网格列之间或周围分配可用空间，而不是在网格项目之间。如果网格容器大于网格本身，可以使用 justify-content 属性沿行内轴对齐网格，从而对齐网格列。

网格的 auto 轨道尺寸（且仅限 auto 轨道尺寸）可以通过 align-content 和 justify-content 属性进行拉伸。因此，默认情况下，auto 尺寸的轨道将占用网格容器中的任何剩余空间。由于网格的行内尺寸必须小于网格容器的行内尺寸才能有空间可供分配，因此在这种情况下该属性没有效果。

正式定义

初始值	`normal`
应用于	弹性容器
继承性	否
计算值	同指定值
动画类型	离散

正式语法

justify-content = 
  normal                                              |
  <content-distribution>                              |
  <overflow-position>? [ <content-position> | left | right ]  

<content-distribution> = 
  space-between  |
  space-around   |
  space-evenly   |
  stretch        

<overflow-position> = 
  unsafe  |
  safe    

<content-position> = 
  center      |
  start       |
  end         |
  flex-start  |
  flex-end

示例

基本网格示例

在此示例中，我们有一个比其网格容器窄的网格，并使用 justify-content 在网格列周围和之间均匀分配可用空间。

HTML

<section> 容器，即我们将要设置的网格容器，有 16 个嵌套的 <div>，它们将成为网格项目。

html

<section class="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
  <div>G</div>
  <div>H</div>
  <div>I</div>
  <div>J</div>
  <div>K</div>
  <div>L</div>
  <div>M</div>
  <div>N</div>
  <div>O</div>
  <div>P</div>
</section>

CSS

.container {
  margin: 5px;
  border: 1px solid;
  box-sizing: border-box;
}

div {
  line-height: 2em;
  border: 1px solid;
  box-sizing: border-box;
  text-align: center;
}

我们将容器宽度设置为 500px，并指定三列，每列宽 80px，这意味着有 260px 的可用空间可以在它们之间或周围分配。然后我们设置 justify-content: space-evenly，这意味着每列之前、之间和之后都将有 65px 的空间。

我们设置了不同的宽度（和背景颜色）来演示对齐方式是如何应用于列的。

css

.container {
  display: grid;
  grid: auto-flow / repeat(3, 80px);
  width: 500px;
  justify-content: space-evenly;
}

div {
  background-color: pink;
  width: 80px;
}

div:nth-of-type(n + 9) {
  width: 35px;
  background-color: lightgreen;
}

div:nth-last-of-type(3) {
  width: 250px;
  background-color: lightblue;
}

结果

请注意，justify-contents 对齐的是列，对网格区域中的项目或对齐没有影响。网格项目，即使是那些溢出其网格单元格的项目，也不会影响列的对齐。

safe 关键字

此示例演示了 safe 关键字。我们指定了四个居中的弹性项目，不允许换行，结果它们溢出了它们的单行弹性容器。通过在 justify-content 属性的 center 中添加 safe，溢出的内容表现得就像对齐模式是 start 一样。

<p><code>justify-content: center;</code></p>
<section class="container safe">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</section>
<p><code>justify-content: safe center;</code></p>
<section class="container safe-center">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</section>
<p><code>justify-content: safe center;</code> with 3 items</p>
<section class="container safe-center">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</section>

.container {
  margin: 5px auto;
  border: 1px dashed;
  box-sizing: border-box;
  background-color: lightblue;
}

div {
  line-height: 1em;
  border: 1px solid;
  box-sizing: border-box;
  text-align: center;
  background-color: pink;
}

容器设置为 center，除了第一个容器外，其他所有容器都添加了 safe 关键字。

css

.container {
  align-items: baseline;
  display: flex;
  width: 350px;
  height: 2em;
}

.safe {
  justify-content: center;
}

.safe-center {
  justify-content: safe center;
}

div {
  flex: 0 0 100px;
}

结果

由于项目溢出了对齐容器，包含 safe 时，对齐模式表现为 start，而 center 对齐未被实现。如果项目不溢出容器，safe 关键字没有效果。

可视化弹性项目分布

此示例包含一个多行换行的弹性布局。第二个弹性项目具有正的 flex 增长因子，消耗了第一行弹性布局中的所有可用空间。

CSS

#container {
  margin: 5px auto;
  border: 1px dashed black;
  box-sizing: border-box;
}

div {
  line-height: 2em;
  border: 1px solid;
  box-sizing: border-box;
  text-align: center;
}

css

#container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between; /* Can be changed in the live sample */
  width: 510px;
}

div {
  line-height: 2em;
  flex: 0 0 120px;
  background-color: pink;
}

div:nth-of-type(2) {
  flex-grow: 1;
  background-color: yellow;
}

div:nth-of-type(n + 9) {
  flex: 0 0 35px;
  background-color: lightgreen;
}
div:last-of-type {
  flex: 0 0 300px;
  background-color: lightblue;
}

<section id="container">
  <div>A</div>
  <div>GROW</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
  <div>G</div>
  <div>H</div>
  <div>I</div>
  <div>J</div>
  <div>K</div>
  <div>L</div>
  <div>M</div>
  <div>N</div>
  <div>O</div>
  <div>P</div>
</section>
<select id="justifyContent">
  <option value="start">start</option>
  <option value="end">end</option>
  <option value="flex-start">flex-start</option>
  <option value="flex-end">flex-end</option>
  <option value="center">center</option>
  <option value="left">left</option>
  <option value="right">right</option>
  <option value="space-between" selected>space-between</option>
  <option value="space-around">space-around</option>
  <option value="space-evenly">space-evenly</option>
  <option value="stretch">stretch</option>
</select>

const justifyContent = document.getElementById("justifyContent");
justifyContent.addEventListener("change", (evt) => {
  document.getElementById("container").style.justifyContent = evt.target.value;
});

结果

从下拉菜单中选择不同的关键字，以可视化不同的 justify-content 关键字值。因为第一行上的一个项目可以增长，所以该行上没有可供 justify-content 属性分配的可用空间。对于 space-between 值，每行的第一个项目与主轴起始边缘对齐，最后一个项目与主轴结束边缘对齐。因此，如果一行只有一个项目，它将与主轴起始边缘对齐（如最后一行所示）。对于其他 space-* 值（如 space-evenly 和 space-around），情况并非如此，它们会将只有一个项目的弹性行居中。

规范

规范
CSS Box Alignment Module Level 3 # align-justify-content
CSS 弹性盒子布局模块第 1 级 # justify-content-property

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 ⁨2025年7月14日⁩，由 MDN 贡献者们更新。

在 GitHub 上查看此页面 • 报告此内容的问题