证明内容合理

在本教程中，我们将研究flex容器提供的alignment属性，该属性从justify-content开始。

默认值

默认情况下，justify-content设置为flex-start的值，该选项将项目放置在主轴的起点。

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

由于主轴从左向右流动，因此默认情况下项目从左开始

柔性端

这将使该项目放置在主轴的末端。

.justify-flex-end {
  justify-content: 柔性端;
}

标记将是：

<div class="container d-flex justify-flex-end">
  ...
</div>

之后，我们将显示的是：

居中对齐

也可以将内容对齐到主轴的中心，并且该属性的值为

.justify-center {
  justify-content: 中央;
}

标记将是：

<div class="container d-flex justify-center">
  ...
</div>

之后，我们将显示的是：

之间的空间

Flexbox还提供了附加值，该附加值可以控制必须如何分配额外空间，因此具有一定的间隔值。

.justify-space-between {
  justify-content: 间隔;
}

标记将是：

<div class="container d-flex justify-space-between">
  ...
</div>

之后，我们将显示的是：

您会看到剩余的多余空间被平均分配，并在弹性项目之间添加。

周围空间

有时您可能还希望在这种情况下将空格放在第一项，最后一项之后，我们有空格值。

.justify-space-around {
  justify-content: 周围空间;
}

标记将是：

<div class="container d-flex justify-space-around">
  ...
</div>

之后，我们将显示的是：

开头和结尾的空间是flex项目之间的空间的一半。

空间均匀

但是，如果即使在项目的开头和结尾都希望有相同的空间，则该值可以是均匀的空间。

.justify-space-evenly {
  justify-content: 空间均匀;
}

标记将是：

<div class="container d-flex justify-space-evenly">
  ...
</div>

之后，我们将显示的是：

开头和结尾的空间是flex项目之间的空间的一半。

您需要记住的是justify-content属性将根据主轴对齐项目，因此，如果将flex-direction设置为column，则该属性将处理垂直对齐。

演示

看笔
Flex证明内容 由rehmaanali（@geekstrick)
上 密码笔.