CSS Flex-direction属性

CSS Flex-direction属性用于指定容器中Flex项目的主轴方向。Flex项目是Flex container中的子元素，它们可以水平和垂直定位。

语法

Flex-direction属性的语法如下所示：

flex-direction: row | row-reverse | column | column-reverse;

• row 横向排列，起点在左侧。
• row-reverse 横向排列，起点在右侧。
• column 垂直排列，起点在上方。
• column-reverse 垂直排列，起点在下方。

描述

Flex-direction决定了排列Flex子项目的方向。这是由Flex container的主轴来定义的。Flex项目沿着这个主轴排列，从而形成Flex线。主轴的开始位置称为main start，结束位置称为main end。与主轴垂直的轴称为cross axis，起点称为cross start，终点称为cross end。

以下是示意图：

示例

/* 默认方向：row */
.flex-container1 {
  display: flex;
  flex-direction: row;
}

/* 改为column */
.flex-container2 {
  display: flex;
  flex-direction: column;
}

结论

• Flex-direction属性在Flex布局中起着至关重要的作用，可以用来控制Flex项目的排列方向和顺序。
• Flex-direction属性的四个有效值分别是row、row-reverse、column和column-reverse。
• 默认值是row，而且它是最常用的。
• 其他三个值可用于需要更精细控制元素排列方向和顺序的场景。