flex-direction属性定义Flex容器主轴方向，可选值为row（默认，水平左到右）、column（垂直上到下）、row-reverse（水平右到左）和column-reverse（垂直下到上），用于控制子元素排列方向，配合justify-content和align-items实现灵活布局。
CSS中的flex-direction属性用于定义Flex容器的主轴方向，决定子元素（flex items）在容器中排列的方向。它是display: flex布局中的核心属性之一。主要可选值包括row、row-reverse、column和column-reverse。
flex-direction: row
作用：子元素沿水平方向从左到右排列（默认值）。
适用于大多数横向布局场景，比如导航栏、按钮组等。
- 主轴为水平方向（从左到右）
- 交叉轴为垂直方向（从上到下）
- 即使容器宽度不足，元素默认不换行
.container {
display: flex;
flex-direction: row;
}
flex-direction: column
作用：子元素沿垂直方向从上到下排列。
立即学习“前端免费学习笔记（深入）”；
适合构建垂直结构，如侧边栏菜单、表单字段堆叠等。
- 主轴变为垂直方向（从上到下）
- 交叉轴变为水平方向（从左到右）
- 常用于移动端或需要纵向排布内容的场景
.container {
display: flex;
flex-direction: column;
}
反向排列：row-reverse 与 column-reverse
这两个值分别让元素在对应方向上反向排列。
- row-reverse：从右到左排列，最后一个元素在最左边
- column-reverse：从下到上排列，最后一个元素在最上方
- 不影响元素本身的样式，只改变排列顺序
如何选择使用哪个方向？
根据页面布局需求决定：
- 横向排列内容用 row
- 竖向堆叠内容用 column
- 需要反转视觉顺序时考虑 reverse 类型
- 结合 justify-content 和 align-items 更好控制对齐
