对齐项目

在本课程中，我们将了解Align Items属性。对齐项目定义了如何沿交叉轴布置弹性项目的默认行为。

它的工作原理类似于辩解内容，但在垂直方向上。

伸展 –对齐项目默认值

这意味着该项目会拉伸横轴的整个长度。
对于e.x.我们有一个Flex容器，该容器的任何像素的高度都比项目从顶部到底部的拉伸程度高。

.container {
  display: flex;
  height: 200px; /* Flex container with some height */
}
.align-item-stretch {
  align-items: 伸展; /* Default value  */
}

和html将是：

<div class="container"> ...
</div>

之后，我们将显示的是：

弹性启动

因此，我们可以指定的第二个值是flex-start。

.align-item-start {
  align-items: 弹性启动;
}

和html将是：

<div class="container d-flex align-item-start"> ...
</div>

之后，我们将显示的是：

如您所见，所有项目都被推到交叉起点，这是交叉轴的起点。记住横轴从上到下流动。

柔性端

与flex-start类似，我们也有flex-end。弯曲末端将项目推到横轴的末端。

.align-item-end {
  align-items: 柔性端;
}

和html将是：

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

之后，我们将显示的是：

居中对齐

第四个可能的值是center，它使内容在横轴上居中。

.align-item-center {
  align-items: center;
}

和html将是：

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

之后，我们将显示的是：

基准线

弹性项目的基准值将使弹性项目及其内容基准对齐

如上图所示，它具有3个项目A，B，C，每个项目的高度和内容大小都不同。您可以看到弹性项目中的所有内容如何位于基线上。

.align-item-baseline {
  align-items: baseline;
}

和html将是：

<div class="container d-flex align-item-baseline"> ...
</div>