CSS的flex布局

align-items: stretch

在 Flexbox 布局中，align-items 属性用于控制 flex 容器内的 flex 子项在交叉轴（cross axis）上的对齐方式。默认情况下，交叉轴是垂直的，除非通过 flex-direction 改变了主轴的方向。

align-items: stretch; 是 align-items 属性的一个值，它的作用是拉伸 flex 子项以使其填满 flex 容器在交叉轴上的空间。换句话说，如果 flex 容器的高度大于其子项的高度（在默认的 row 方向布局中），align-items: stretch; 会使得每个子项的高度自动扩展到与容器的高度一致。

这里是一个简单的例子来说明 align-items: stretch; 的效果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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

.flex-container {
  display: flex;
  align-items: stretch; /* 拉伸子项以填满容器 */
  height: 200px; /* 设置容器高度 */
  background-color: lightgray;
}

.flex-item {
  flex: 1; /* 使子项在主轴上均分空间 */
  background-color: lightblue;
  border: 1px solid black;
  /* 注意这里没有设置高度 */
}

在这个例子中，.flex-container 是一个 flex 容器，它有三个子项。由于设置了 align-items: stretch;，每个 .flex-item 的高度都会自动扩展到与 .flex-container 的高度（200px）一致，尽管子项本身没有设置具体的高度值。

如果你不希望子项被拉伸，而是希望它们在交叉轴上保持自然大小或者对齐到容器的特定位置，你可以使用 align-items 的其他值，如 flex-start、flex-end、center 或 baseline。