flex-direction 是 CSS 中用于设置弹性容器（Flex Container）的主轴方向的属性。主轴是弹性容器的主要方向，弹性项目（Flex Items）在主轴上排列。

基本语法如下：
.flex-container {
  flex-direction: row | row-reverse | column | column-reverse;
}

其中：
  •  row（默认值）：主轴为水平方向，起点在左端。

  •  row-reverse：主轴为水平方向，起点在右端。

  •  column：主轴为垂直方向，起点在上沿。

  •  column-reverse：主轴为垂直方向，起点在下沿。


以下是一些例子：

1. 水平方向，起点在左端（默认值）：
    .flex-container {
      flex-direction: row;
    }

2. 水平方向，起点在右端：
    .flex-container {
      flex-direction: row-reverse;
    }

3. 垂直方向，起点在上沿：
    .flex-container {
      flex-direction: column;
    }

4. 垂直方向，起点在下沿：
    .flex-container {
      flex-direction: column-reverse;
    }

这个属性影响了弹性容器中子项目的排列方式。与此属性相关的还有其他一些属性，比如 justify-content（用于定义在主轴上如何分配弹性项目之间的空间）、align-items（用于定义在交叉轴上如何对齐弹性项目）、align-self（用于定义单个弹性项目在交叉轴上的对齐方式）等。这些属性的组合可以实现灵活的布局。


转载请注明出处：http://www.zyzy.cn/article/detail/4182/CSS