flex子元素侧轴的布局方式

Flexbox是一种用于在一维空间（主要是行或列）上对元素进行流式布局的现代CSS模型。对于子元素的侧轴（即垂直方向），有几种常见的布局方式：

1. **`align-items`属性**：控制子元素在交叉轴（垂直方向）上的对齐方式，例如你可以设置为`flex-start`（默认值，顶部对齐）、`center`（居中对齐）、`flex-end`（底部对齐）或者`baseline`（文本 baseline 对齐）。

2. **`justify-content`属性**：影响主轴（水平方向）上子元素的对齐方式。类似地，有多种选项如`flex-start`（开始对齐）、`flex-end`（结束对齐）、`center`（居中对齐）、`space-between`（等间距分布，留空隙）、`space-around`（每个元素两侧都留空隙）等。

3. **`align-self`属性**：允许单个子元素独立调整其在交叉轴上的对齐方式，可以覆盖`align-items`的效果。

通过组合这些属性，你可以精细地控制子元素在flex容器内的垂直布局。如果想要让子元素自动分配剩余的空间，可以考虑使用`auto`值。