flex切换主轴的方法

  在使用Flexbox布局时,可以通过flex-direction属性来切换主轴方向,该属性有四个可选值:
 
  row(默认值):主轴为水平方向,起点在左端。
 
  row-reverse:主轴为水平方向,起点在右端。
 
  column:主轴为垂直方向,起点在上沿。
 
  column-reverse:主轴为垂直方向,起点在下沿。
 
  下面是一个例子,将主轴方向从水平方向改为垂直方向:
 
  css
 
  Copycode
 
  .container{
 
  display:flex;
 
  flex-direction:column;
 
  }
 
  这样设置后,Flex容器的主轴方向就会改变,项目会按照新的主轴方向排列。需要注意的是,flex-direction属性还会影响Flex项目的对齐方式和顺序,需要根据具体需求进行调整。
 
  除了flex-direction属性之外,还可以使用writing-mode和text-orientation属性来切换主轴方向。
 
  writing-mode属性可以控制文本的书写方向,可以将主轴方向从水平方向切换为垂直方向,也可以控制主轴方向的左右对齐方式。例如:
 
  css
 
  Copycode
 
  .container{
 
  writing-mode:vertical-lr;
 
  text-align:right;
 
  }
 
  这样设置后,Flex容器的主轴方向就会从水平方向切换为垂直方向,并且项目会按照新的主轴方向排列,同时文本也会相应地沿着新的主轴方向排列,并且靠右对齐。
 
  text-orientation属性可以控制文本的方向,可以将文本沿着主轴方向旋转,也可以控制旋转的方向和角度。例如:
 
  css
 
  Copycode
 
  .item{
 
  text-orientation:mixed;
 
  text-combine-upright:all;
 
  }
 
  这样设置后,Flex项目的文本就会按照主轴方向排列,并且每个字符都会沿着主轴方向旋转,使得文本内容可以在垂直方向上显示。需要注意的是,这种方式对于一些非文本内容可能会不起作用,例如图片、按钮等。