flex-direction属性定义Flex容器子元素排列方向，有四个值：row（默认，从左到右）、row-reverse（从右到左）、column（从上到下）、column-reverse（从下到上），需应用于display:flex的容器，影响主轴方向与子项布局顺序。
flex-direction 属性用于定义 Flex 容器中子元素的排列方向。它决定了主轴的方向，从而影响子项的布局顺序。这个属性应用在 flex 容器上，有四个可选值。
1. row（默认值）
子元素沿水平方向从左到右排列。主轴为水平方向，起点在左端。
适用于大多数从左到右的语言环境下的横向布局。示例： flex-direction: row;
2. row-reverse
子元素沿水平方向从右到左排列。主轴仍是水平方向，但起点在右端。
示例： flex-direction: row-reverse;
项目顺序反转，最后一个项目显示在最左边。3. column
子元素沿垂直方向从上到下排列。主轴变为垂直方向，起点在上方。
立即学习“前端免费学习笔记（深入）”；
示例： flex-direction: column;
适合构建垂直菜单或堆叠内容区块。4. column-reverse
子元素沿垂直方向从下到上排列。主轴为垂直方向，起点在下方。
示例： flex-direction: column-reverse;
常用于需要最新内容显示在顶部的场景，如聊天记录。使用方式：将 flex-direction 设置在父容器上，该容器需先设为 Flex 容器。
基本代码结构：
.container {
display: flex;
flex-direction: row | row-reverse | column | column-reverse;
}
基本上就这些。选择哪个值取决于你希望内容如何流动，搭配其他 flex 属性可以实现灵活的响应式布局。
