flex元素竖着对齐

要实现flex元素的垂直对齐，可以使用align-items属性。该属性用于设置flex容器内所有flex项目在交叉轴上的对齐方式。默认值为stretch，即拉伸。常用的属性值包括：
- flex-start：交叉轴的起点对齐；
- flex-end：交叉轴的终点对齐；
- center：交叉轴的中点对齐；
- baseline：项目的第一行文字的基线对齐；
- stretch：如果项目未设置高度或设为auto，将占满整个容器的高度。

以下是一个例子，展示如何使用align-items属性实现flex元素的垂直对齐：

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 200px;
  border: 1px solid black;
}

.item {
  width: 50px;
  height: 50px;
  background-color: red;
}
</style>

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

在上面的例子中，我们创建了一个高度为200px的flex容器，并将其内部的flex项目在交叉轴上居中对齐。这里的交叉轴是垂直方向，因为我们设置了flex-direction: column。每个flex项目都是一个50x50的红色正方形。