Flex 布局：垂直内容两端对齐的实现方法

可以使用 `align-items` 属性来实现垂直方向上的内容两端对齐。将 `align-items` 属性设置为 `stretch`，再将子元素中需要对齐的元素的 `margin-top` 和 `margin-bottom` 设置为 `auto`，即可实现垂直方向上的内容两端对齐。

示例代码：

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

.container {
  display: flex;
  align-items: stretch;
}

.item {
  flex: 1;
}

.item-2 {
  margin-top: auto;
  margin-bottom: auto;
}

在上面的示例中，容器使用了 Flex 布局，并将 `align-items` 属性设置为 `stretch`。每个子元素都设置了 `flex: 1`，使它们均分剩余空间。其中，`item-2` 元素使用了 `margin-top` 和 `margin-bottom` 属性，并将它们的值都设置为 `auto`，使得 `item-2` 元素在垂直方向上与其他元素之间产生了剩余空间，从而实现了垂直方向上的内容两端对齐。