flex布局垂直两端对齐

要在Flex布局中实现垂直两端对齐，可以使用Flexbox的align-items属性。align-items属性决定了Flex容器中项目在交叉轴上的对齐方式。

对于垂直两端对齐，你可以将align-items属性设置为"flex-start"和"flex-end"的组合。具体步骤如下：

1. 创建一个Flex容器，并将其display属性设置为"flex"。
2. 将容器的flex-direction属性设置为"column"，以确保项目在垂直方向上进行排列。
3. 使用align-items属性将项目在交叉轴上的对齐方式设置为"flex-start"，以使项目在顶部对齐。
4. 使用margin-top:auto样式将最后一个项目的顶部外边距设置为"auto"，以使其在底部对齐。

下面是一个示例代码片段：

.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.container .item:last-child {
  margin-top: auto;
}

<div class="container">
  <div class="item">项目1</div>
  <div class="item">项目2</div>
  <div class="item">项目3</div>
</div>

这样设置后，项目1将会在容器的顶部对齐，项目3将会在容器的底部对齐。