flex-direction属性定义Flex容器主轴方向,控制子元素排列方式:row(左到右)、row-reverse(右到左)、column(上到下)、column-reverse(下到上),需配合display:flex使用。

flex-direction 属性用于定义 Flex 容器中主轴的方向,也就是子元素的排列方向。通过这个属性,你可以控制子项是横向还是纵向排列,以及排列的起始位置。
flex-direction 可选值
该属性有四个可选值:
- row:主轴为水平方向,子元素从左到右排列(默认值)
- row-reverse:主轴为水平方向,子元素从右到左排列
- column:主轴为垂直方向,子元素从上到下排列
- column-reverse:主轴为垂直方向,子元素从下到上排列
基本用法示例
在父容器上设置 display: flex 后,再使用 flex-direction 来指定方向:
.container {
display: flex;
flex-direction: row; /* 可替换为 row-reverse、column 或 column-reverse */
}
实际应用场景
根据布局需求选择合适的方向:
立即学习“前端免费学习笔记(深入)”;
- 做水平导航栏时使用 row
- 需要从右往左展示内容(如某些语言排版)可用 row-reverse
- 构建垂直菜单或堆叠布局时使用 column
- 倒序显示列表项(比如最新消息在最上面)可考虑 column-reverse
基本上就这些,不复杂但容易忽略细节。










