flex侧轴对齐方式有哪些呢?

  在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;
 
  }