CSS flex-direction 属性

flex-direction 是 CSS3 引入的新属性，用于指定 flex 容器中 flex 项的主轴排列方向。主轴即是 flex 容器的排列方向，与之对应的是交叉轴。

该属性有 4 种可选值，分别为：

row: 主轴为水平方向，起点在左端。
row-reverse: 主轴为水平方向，起点在右端。
column: 主轴为竖直方向，起点在上沿。
column-reverse: 主轴为竖直方向，起点在下沿。

语法

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

container: 容器元素选择器
row：主轴方向为水平方向
row-reverse：主轴方向为水平方向，起点在右端
column：主轴方向为竖直方向
column-reverse：主轴方向为竖直方向，起点在下端

示例

以下示例展示了 flex-direction 不同取值下的效果：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS flex-direction 属性示例</title>
  <style>
    .container {
      display: flex;
      border: 1px solid black;
      height: 300px;
    }
    .item {
      width: 100px;
      height: 100px;
      margin: 10px;
    }
    .item1 {
      background-color: #f44336;
    }
    .item2 {
      background-color: #4CAF50;
    }
    .item3 {
      background-color: #2196F3;
    }
    .item4 {
      background-color: #e91e63;
    }
  </style>
</head>
<body>
  <h2>row</h2>
  <div class="container" style="flex-direction: row;">
    <div class="item item1"></div>
    <div class="item item2"></div>
    <div class="item item3"></div>
    <div class="item item4"></div>
  </div>

  <h2>row-reverse</h2>
  <div class="container" style="flex-direction: row-reverse;">
    <div class="item item1"></div>
    <div class="item item2"></div>
    <div class="item item3"></div>
    <div class="item item4"></div>
  </div>

  <h2>column</h2>
  <div class="container" style="flex-direction: column;">
    <div class="item item1"></div>
    <div class="item item2"></div>
    <div class="item item3"></div>
    <div class="item item4"></div>
  </div>

  <h2>column-reverse</h2>
  <div class="container" style="flex-direction: column-reverse;">
    <div class="item item1"></div>
    <div class="item item2"></div>
    <div class="item item3"></div>
    <div class="item item4"></div>
  </div>
</body>
</html>

效果图如下：

效果图

从效果图可以看到，flex-direction 对应不同的取值时，flex 项的排列方向也随之改变。

总结

flex-direction 属性可以用于修改 flex 容器中 flex 项的排列方向。
row 和 row-reverse 的区别在于主轴的起点位置不同。
column 和 column-reverse 的区别在于交叉轴的起点位置不同。
flex-direction 可以与其他 flex 相关属性一起使用，如 justify-content, align-items, align-self 等，共同控制 flex 容器的布局形式。

CSS flex-basis 属性 CSS flex-flow 属性