在Flexbox中,侧轴对齐方式可以使用align-items属性来设置,该属性决定了项目在侧轴方向上如何对齐。以下是align-items属性可能的值:
stretch(默认值):项目被拉伸以适应容器。
flex-start:项目向容器的起始位置对齐。
flex-end:项目向容器的结束位置对齐。
center:项目在容器的中心对齐。
baseline:项目在容器的基线对齐(如果项目没有基线,则默认与项目底部对齐)。
例如,要将所有项目在侧轴方向上居中对齐,可以将容器的align-items属性设置为center,如下所示:
.container{
display:flex;
align-items:center;
}
除了align-items属性,Flexbox还提供了其他控制侧轴对齐方式的属性:
align-self:该属性用于单独控制某个项目在侧轴方向上的对齐方式,它的可选值与align-items属性相同。例如,可以将某个项目在侧轴方向上居中对齐,而其他项目仍然保持默认的对齐方式,如下所示:
.item{
align-self:center;
}
align-content:该属性用于多行Flex容器的对齐方式,当容器中存在多行项目时,该属性控制各行之间的对齐方式。它的可选值包括:
flex-start:各行向容器的起始位置对齐。
flex-end:各行向容器的结束位置对齐。
center:各行在容器的中心对齐。
space-between:各行平均分布在容器内,相邻行之间的间距相等。
space-around:各行平均分布在容器内,行与行之间的间距相等,首尾两行与容器边缘的间距是相邻行间距的一半。
stretch(默认值):各行被拉伸以适应容器。
如果容器只有一行项目,则该属性无效。
例如,要让多行Flex容器中的项目在侧轴方向上居中对齐,可以将容器的align-content属性设置为center,如下所示:
.container{
display:flex;
flex-wrap:wrap;
align-content:center;
}