用flex布局让他们分别战局盒子的顶端和底端

可以使用 `justify-content` 和 `align-items` 属性来实现。

例如，将父元素设置为 `display: flex;`，并设置 `justify-content: space-between;` 和 `align-items: flex-start;`，则第一个子元素将位于顶部，第二个子元素将位于底部。

示例代码：

<div class="parent">
  <div class="first-box">第一个盒子</div>
  <div class="second-box">第二个盒子</div>
</div>

.parent {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  height: 200px;
}

.first-box {
  background-color: red;
  height: 50%;
}

.second-box {
  background-color: blue;
  height: 50%;
}

这将在一个高度为 200px 的父元素中创建两个高度为 50% 的子元素，使它们分别位于父元素的顶部和底部。你可以根据你的需求修改这些值。

相关问题

盒子flex布局上下

盒子flex布局上下的对齐方式可以通过align-items属性来控制。align-items属性有五个可选值，分别是flex-start、flex-end、center、baseline和stretch。flex-start将盒子在父容器的顶部对齐，flex-end将盒子在父容器的底部对齐，center使盒子在垂直方向上居中对齐，baseline使盒子的基线对齐，stretch会将盒子的高度拉伸以填充满整个父容器。