justify-content

CSS 的 justify-content 属性定义了浏览器如何将 Flex 容器的主轴和网格以及多列容器的内联轴上的内容项之间的空间以及周围的空间进行分配。

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

语法

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 */
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: 项目根据 Flex 容器的主起点边沿排列容器的边紧密排列在一起。这仅适用于 Flex 布局项目。对于不是 Flex 容器子元素的项目，此值将被视为 start。
flex-end: 项目根据 Flex 容器的主终点边沿排列容器的边紧密排列在一起。这仅适用于 Flex 布局项目。对于不是 Flex 容器子元素的项目，此值将被视为 end。
center: 项目沿主轴的排列容器的中心紧密排列在一起。
left: 项目沿排列容器的左边缘紧密排列在一起。当属性的水平轴不平行于内联轴时，例如，当设置了 flex-direction: column; 时，此值的行为类似于 start。
right: 项目沿相应轴的排列容器的右边缘紧密排列在一起。如果属性的轴不平行于内联轴（在网格容器中）或主轴（在 Flexbox 容器中），此值的行为类似于 start。
normal: 行为类似于 stretch，但多列容器除外，多列容器具有非 auto 的 column-width，在这种情况下，列将采用其指定的 column-width 而不是拉伸以填充容器。由于 stretch 在 Flex 容器中表现为 start，因此 normal 也表现为 start。
space-between: 项目沿主轴在排列容器内均匀分布。每对相邻项目之间的间距相同。第一个项目与主起点边缘齐平，最后一个项目与主终点边缘齐平。
space-around: 项目沿主轴在排列容器内均匀分布。每对相邻项目之间的间距相同。第一个项目之前的空白和最后一个项目之后的空白等于每对相邻项目之间空白的一半。如果只有一个项目，它将居中。
space-evenly: 项目沿主轴在排列容器内均匀分布。每对相邻项目之间的间距、主起点边缘和第一个项目之间的间距以及主终点边缘和最后一个项目之间的间距完全相同。
stretch: 如果项目沿主轴的组合大小小于排列容器的大小，则任何 auto 大小的项目的大小将均匀增加（非按比例），同时仍然遵守 max-height/max-width （或等效功能）强加的约束，以使组合大小完全填充排列容器沿主轴。

注意： 对于 Flexbox，stretch 值表现为 flex-start 或 start。这是因为在 Flexbox 中，拉伸是使用 flex-grow 属性控制的。
safe: 如果项目超出对齐容器，则项目将被对齐，就好像对齐模式为start一样。不会实现所需的对齐。
不安全: 即使项目超出对齐容器，也会实现所需的对齐。与safe不同，safe会为了防止溢出而忽略所需的对齐。

描述

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

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

在弹性布局中，该属性定义了如何在主轴上分配弹性项目之间或周围的正空闲空间。此属性影响一行中元素之间的间距，而不是行之间的间距。对齐是在应用长度和自动边距之后进行的，这意味着当一行中一个或多个弹性项目具有大于0 的 flex-grow 因子时，该属性没有效果，因为沿着该行没有空间可分配。此外，由于沿着主轴的拉伸受 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 属性中将safe 添加到center，溢出的内容的行为就像对齐模式为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 关键字没有效果。

可视化弹性项目分配

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

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 盒子对齐模块级别 3 # align-justify-content
CSS 弹性盒布局模块级别 1 # justify-content-property

浏览器兼容性

BCD 表格仅在浏览器中加载