flex 上下两端对齐

要实现flex上下两端对齐，可以使用align-items属性。align-items属性用于设置flex容器内各个flex子项在交叉轴上的对齐方式。默认值为stretch，即拉伸。如果想要上下两端对齐，可以将align-items设置为flex-start和flex-end的组合，如下所示：

.container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

上述代码中，align-items设置为flex-start，表示子项在交叉轴上顶部对齐；justify-content设置为space-between，表示子项在主轴上两端对齐。

相关问题

display:flex上下两端对齐

要实现上下两端对齐，可以使用`display: flex`结合`justify-content`和`align-items`属性。具体步骤如下：

1. 在父容器上添加`display: flex`属性，将其设置为弹性布局。
2. 使用`justify-content`属性来控制主轴上的对齐方式。设置为`flex-start`可以使子元素在主轴上左对齐，设置为`flex-end`可以使子元素在主轴上右对齐。
3. 使用`align-items`属性来控制侧轴上的对齐方式。设置为`flex-start`可以使子元素在侧轴上顶部对齐，设置为`flex-end`可以使子元素在侧轴上底部对齐。

以下是一个示例代码：

.parent {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}

在上述示例中，父容器的子元素将会在主轴上左对齐，在侧轴上底部对齐。你可以根据需要调整对齐方式。

使用flex布局，实现上下分开两端对齐

可以通过以下代码实现上下分开两端对齐的效果：

<div class="container">
  <div class="top">这是上面的内容</div>
  <div class="bottom">这是下面的内容</div>
</div>

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  height: 300px; /* 设置高度 */
}

.top {
  width: 50%;
}

.bottom {
  width: 50%;
}

上述代码中，我们使用了 flex 布局，通过 `flex-direction: column` 将容器内的元素按照垂直方向排列，`justify-content: space-between` 实现上下两端对齐，`align-items: flex-start` 实现左对齐，最后通过设置 `width` 来控制上下两部分的宽度。需要注意的是，为了实现上下两端对齐，我们需要给容器设置一个固定的高度。