让弹性盒子垂直分布的语法

在CSS中，要让弹性盒子元素（Flexbox）垂直分布，你可以使用`flex-direction`属性设置主轴的方向，并结合`align-items`属性来控制交叉轴（垂直方向）上的对齐方式。以下是一些常见的垂直排列示例：

1. `flex-direction: column;`: 将主轴设为垂直方向，元素会从上到下堆叠。默认值就是这个样子。

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

2. `align-items: flex-start;` 或 `align-items: top;`: 元素顶部对齐于容器顶部。

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

3. `align-items: center;`: 元素居中对齐于容器高度。

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

4. `align-items: flex-end;` 或 `align-items: bottom;`: 元素底部对齐于容器底部。

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

5. `align-items: stretch;`: 默认情况下，如果项目没有明确的高度，它将拉伸填充整个可用空间。

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