flex侧轴上下对齐

Flexbox布局中的侧轴指的是交叉轴（cross axis），它是与主轴（main axis）垂直的轴。在Flexbox布局中，默认主轴是水平方向的，侧轴就是垂直方向的；如果主轴是垂直方向的，则侧轴是水平方向的。侧轴上的对齐主要通过CSS的flex布局属性来控制，尤其是`align-items`和`align-self`属性。

1. `align-items`: 这个属性定义了项目在侧轴上的对齐方式，它会影响所有flex项目的对齐方式。当主轴是水平方向时，`align-items`控制的是项目的垂直对齐方式；当主轴是垂直方向时，它控制的是项目的水平对齐方式。

2. `align-self`: 这个属性允许单个项目有不同于其他项目的对齐方式，它会覆盖`align-items`的设置。`align-self`同样适用于控制项目在侧轴上的对齐。

这两个属性可以设置以下值：
- `flex-start`：侧轴起始位置对齐。
- `flex-end`：侧轴结束位置对齐。
- `center`：侧轴居中对齐。
- `baseline`：项目的第一行文字的基线对齐。
- `stretch`：如果项目未设置高度或设为auto，将占满整个容器的高度。

示例代码：

.container {
  display: flex;
  flex-direction: row; /* 主轴为水平方向 */
  height: 200px; /* 容器高度 */
}

.item {
  width: 100px; /* 项目宽度 */
  margin: 5px;
}

/* 项目在侧轴上的对齐方式为垂直居中 */
.item {
  align-self: center;
}

/* 容器内所有项目的对齐方式统一为侧轴上起始位置对齐 */
.container {
  align-items: flex-start;
}