CSS | flex-direction 属性

flex-direction属性是CSS的一种常用弹性盒模型属性，用于设置弹性盒子容器中主轴的方向。简单来说，就是用它来决定弹性盒子里的子元素在主轴上的排列方向。这个属性很重要，使用得当可以让我们轻松地实现众多布局效果。

语法

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

具体说明如下:

• row： 主轴为水平方向，起点在左端（默认值）。
• row-reverse： 主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。

使用示例

.container {
  display: flex;
  flex-direction: row;
}

上述代码将在container容器中创建一个横轴布局，就像这样：

如果我们把主轴的方向设置为column，那么子元素就会在垂直方向上排成一列。看下面的代码和效果演示：

.container {
  display: flex;
  flex-direction: column;
}

同样的，我们还可以设置row-reverse和column-reverse属性值，让子元素的排列方向和起点位置反向。

注意事项

• flex-direction是容器属性，只能用在弹性盒子容器上，不能用于子元素。
• 虽然flex-direction可以决定主轴的方向，但主轴的方向并不代表排列方向。排列方向需要通过justify-content和align-items属性来决定。
• 当设置为column或column-reverse时，align-items会变成主轴，justify-content会变成交叉轴。

参考资料

• MDN CSS flex-direction