flex切换主轴方向:flex布局的主轴方向有哪几种?

  在CSS中,使用display属性来控制一个元素的弹性盒子容器,然后使用flex-direction属性来控制主轴的方向。
 
  flex-direction属性有以下几个取值:
 
  row:主轴为水平方向,起点在左端。
 
  row-reverse:主轴为水平方向,起点在右端。
 
  column:主轴为垂直方向,起点在上沿。
 
  column-reverse:主轴为垂直方向,起点在下沿。
 
  例如,如果你想将一个弹性盒子容器的主轴方向从默认的水平方向改为垂直方向,可以在该容器的样式中添加以下代码:
 
  css
 
  Copycode
 
  display:flex;
 
  flex-direction:column;
 
  这样就可以使该容器的主轴方向变为垂直方向了。
 
  除了flex-direction属性,还有其他属性可以用来调整弹性盒子容器的布局。
 
  justify-content:控制弹性盒子容器中所有项目在主轴上的对齐方式。其取值包括:
 
  flex-start:项目在容器的起始位置对齐。
 
  flex-end:项目在容器的结束位置对齐。
 
  center:项目在容器的中心位置对齐。
 
  space-between:项目会平均地分布在容器中,相邻项目之间的间隔相等。
 
  space-around:项目会平均地分布在容器中,每个项目两侧的间隔相等。
 
  align-items:控制弹性盒子容器中所有项目在交叉轴上的对齐方式。其取值包括:
 
  flex-start:项目在交叉轴的起始位置对齐。
 
  flex-end:项目在交叉轴的结束位置对齐。
 
  center:项目在交叉轴的中心位置对齐。
 
  baseline:项目的基线对齐。
 
  stretch:如果项目未设置高度或设为auto,将占满整个容器的高度。
 
  align-content:当弹性盒子容器内有多行时,控制行与行之间的对齐方式。其取值包括:
 
  flex-start:多行项目在交叉轴的起始位置对齐。
 
  flex-end:多行项目在交叉轴的结束位置对齐。
 
  center:多行项目在交叉轴的中心位置对齐。
 
  space-between:多行项目会平均地分布在交叉轴上,相邻行之间的间隔相等。
 
  space-around:多行项目会平均地分布在交叉轴上,每个项目两侧的间隔相等。
 
  stretch:如果项目未设置高度或设为auto,将占满整个容器的高度。
 
  以上这些属性可以根据需要进行组合使用,从而达到各种布局效果。