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

具体的使用方式如下：
/* 语法 */
flex-direction: row | row-reverse | column | column-reverse;

/* 示例 */
.container {
  display: flex;
  flex-direction: row; /* 默认值，主轴方向为水平方向，项目从左往右排列 */
}

.container-reverse {
  display: flex;
  flex-direction: row-reverse; /* 主轴方向为水平方向，项目从右往左排列 */
}

.column-container {
  display: flex;
  flex-direction: column; /* 主轴方向为垂直方向，项目从上往下排列 */
}

.column-container-reverse {
  display: flex;
  flex-direction: column-reverse; /* 主轴方向为垂直方向，项目从下往上排列 */
}

  •  row: 主轴方向为水平方向，项目从左往右排列。

  •  row-reverse: 主轴方向为水平方向，项目从右往左排列。

  •  column: 主轴方向为垂直方向，项目从上往下排列。

  •  column-reverse: 主轴方向为垂直方向，项目从下往上排列。


flex-direction 可以控制弹性容器中项目的排列方向，影响到主轴的方向，从而改变项目在容器中的排列方式。这在响应式设计和灵活布局中非常有用。


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