弹性盒子垂直分布且一个在上一个在下

可以使用flexbox的属性`flex-direction`来指定弹性盒子的主轴方向为垂直方向，默认为水平方向。另外，可以使用`align-items`属性来控制项在交叉轴上的对齐方式，从而实现一个在上一个在下的布局。

例如，以下代码实现了两个块元素在垂直方向上分布，并且一个在上一个在下的布局：

<style>
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 200px;
  }
  
  .box {
    width: 100px;
    height: 50px;
    background-color: #f00;
    margin: 10px;
  }
  
  .box2 {
    background-color: #0f0;
  }
</style>

<div class="container">
  <div class="box"></div>
  <div class="box box2"></div>
</div>

在以上代码中，`.container`设置为一个垂直方向的弹性盒子，并且指定了交叉轴上的对齐方式为居中对齐。`.box`和`.box2`分别表示两个块元素，通过设置它们的`margin`属性来控制它们在垂直方向上的间距。同时，为了让`.box2`在`.box`的下方，可以给`.box2`添加一个额外的class `box2`，并设置其背景颜色为绿色。

相关问题

弹性盒子改变主轴方向

可以使用CSS属性`flex-direction`来改变弹性盒子的主轴方向。该属性有四个可选值：

- `row`：默认值，主轴方向为水平方向，起点在左端。
- `row-reverse`：主轴方向为水平方向，起点在右端。
- `column`：主轴方向为垂直方向，起点在上沿。
- `column-reverse`：主轴方向为垂直方向，起点在下沿。

例如，如果要将弹性盒子的主轴方向改为垂直方向，可以这样设置：

.container {
  display: flex;
  flex-direction: column;
}