flex布局一个很有意思的事情----align-items你不知道的效果

align-items 是 Flexbox 布局中的一个属性，它用于在弹性容器的侧轴上对齐容器内的项目。这个属性的值决定了项目在侧轴上的位置。

以下是 align-items 的一些常用值及其效果：

1. flex-start：项目在侧轴上对齐到容器的开始位置。
2. flex-end：项目在侧轴上对齐到容器的结束位置。
3. center：项目在侧轴上居中对齐。
4. stretch：如果项目未设置高度或设为 auto，项目会伸展以填满整个容器。
5. baseline：项目在侧轴上对齐到第一行文本的基线上。

下面是一个简单的例子，演示如何使用 align-items：

HTML:

<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>

CSS:

.flex-container {
  display: flex;
  height: 200px;
  background-color: lightblue;
  align-items: center; /* 修改这里的值来看不同的效果 */
}
 
.flex-item {
  width: 100px;
  margin: 5px;
  background-color: coral;
  text-align: center;
}

在这个例子中，.flex-container 是一个弹性容器，它设置了 align-items: center;，这意味着其内部的 .flex-item 会在侧轴（垂直轴）上居中对齐。如果你将 align-items 的值改为 flex-start 或 flex-end，项目会分别对齐到容器的顶部或底部。