这个白色背景的盒子，是一个 flex 容器，因为在它上面用了 flex 这个类，flex-row 这个类会把 flex 方向设置成 row。这样水平方向是主轴，垂直方向的是交叉轴。

这个 flex 容器里直接包装的东西是 flex 项目，我们可以设置这些项目的对齐方式。比如想让它们在交叉轴统一居中，可以在 flex 容器上添加 items-center。现在这几个项目会垂直居中在它的包装容器里。这个 items-center 就是把元素的 align-items 这个属性设置成了 center。

要把项目放在交叉轴的终点，可以用一个 items-end。这个类会把 align-items 设置成 flex-end。这样项目就会在交叉轴的底部对齐。

flex 项目自己也可以设置交叉轴的对齐方式，比如在这个 1 号盒子上面，添加一个 self-start，这个类会把 align-self 这个属性的值设置成 flex-start，意思就是在交叉轴的起点对齐。

在 2 号盒子上面，用 self-center，它会把 align-self 设置成 center，这样这个项目会在交叉轴中心点这个位置上。

现在 flex 方向是 row，我们可以把 flex 方向设置成 column，把这个 flex-row 换成 flex-col，这个类会把 flex-direction 设置成 column。

改变成了 flex 方向以后， flex 项目的在交叉轴的对齐也会发生变化。因为 flex 方向如果是 column， 主轴是垂直方向，交叉轴就会是水平方向。

这样 1 号盒子会在左边，2 号盒子在中间，3 号盒子造右边显示，也就是交叉轴的终点这个位置。