在Flexbox布局中，flex项目沿主轴排列，同时还可以控制它们在交叉轴上的对齐方式。以下是Flexbox中常见的侧轴对齐方式：
stretch（默认值）：如果没有指定项目的高度或者宽度，则会自动将其拉伸以填满交叉轴。
flex-start：将项目顶部与交叉轴的起点对齐。
flex-end：将项目底部与交叉轴的终点对齐。
center：将项目垂直居中对齐于交叉轴。
baseline：将项目的基线对齐于交叉轴。
要设置侧轴对齐方式，可以使用CSS属性align-items。例如，要将项目底部与交叉轴的终点对齐，可以将align-items设置为flex-end，如下所示：
.container{
display:flex;
align-items:flex-end;
}
除了align-items属性之外，还有一个类似的属性align-content可以用于控制整个flex容器在交叉轴上的对齐方式，它的取值与align-items基本相同，但是对整个容器的多行项目进行对齐。
以下是align-content的常见取值：
stretch（默认值）：将项目沿交叉轴拉伸以填充整个交叉轴空间。
flex-start：将项目放置在交叉轴的起点，之后的行向底部堆叠。
flex-end：将项目放置在交叉轴的终点，之前的行向顶部堆叠。
center：将项目居中对齐于交叉轴，之前和之后的行向两侧堆叠。
space-between：在各行之间平均分配空白空间，但是第一行和最后一行的两端没有空白。
space-around：在各行之间平均分配空白空间，包括第一行和最后一行两端。
要设置align-content属性，需要将其应用于flex容器。例如：
.container{
display:flex;
align-content:center;
}
这将使整个flex容器在交叉轴上居中对齐。注意，align-content只对多行项目有效，如果flex容器只有一行项目，则不会起作用。