CSS flex-direction 属性

flex-direction 属性用于指定弹性容器中子元素的排列方向。它有四个可能的取值，分别是 row、row-reverse、column 和 column-reverse。

取值说明

• row：默认值，子元素在弹性容器中水平排列，起点在左端。
• row-reverse：子元素在弹性容器中水平排列，起点在右端。
• column：子元素在弹性容器中垂直排列，起点在顶端。
• column-reverse：子元素在弹性容器中垂直排列，起点在底端。

代码示例

// www.javascriptcn.com code example
.container {
  display: flex;
  flex-direction: row;
}

/* 子元素水平排列，起点在左端 */

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

/* 子元素水平排列，起点在右端 */

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

/* 子元素垂直排列，起点在顶端 */

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

/* 子元素垂直排列，起点在底端 */

在实际开发中，根据具体布局需求选择不同的 flex-direction 取值，可以灵活地控制子元素在弹性容器中的排列方向。