flex-direction属性决定Flex容器主轴方向，默认为row（水平从左到右），可选row-reverse（水平从右到左）、column（垂直从上到下）、column-reverse（垂直从下到上）；横向布局如导航栏用row，纵向布局如菜单用column，倒序内容如聊天记录用column-reverse；主轴方向改变后，justify-content相应调整主轴对齐，align-items控制交叉轴对齐，配合使用可高效实现灵活布局。
Flex容器的主轴方向由 flex-direction 属性控制，通过调整该属性可以改变子元素在容器中的排列方式。默认情况下，主轴是水平方向（从左到右），但我们可以根据布局需求灵活调整。
flex-direction 的四个可选值
该属性有四个常用取值，分别对应不同的主轴方向：
- row：主轴为水平方向，起点在左端（默认值）
- row-reverse：主轴为水平方向，起点在右端
- column：主轴为垂直方向，起点在上沿
- column-reverse：主轴为垂直方向，起点在下沿
如何选择合适的主轴方向
实际开发中，主轴方向的选择取决于页面结构和响应式需求：
- 横向排列内容（如导航栏、按钮组）使用 row 或 row-reverse
- 纵向堆叠内容（如侧边栏菜单、表单字段）推荐设置为 column
- 需要倒序展示数据（如聊天记录最新消息在底部）可用 column-reverse
配合其他 Flex 属性更高效
调整主轴方向后，注意对齐方式也要相应适配：
- 主轴方向为 row 时，justify-content 控制水平对齐
- 主轴方向为 column 时，justify-content 控制垂直对齐
- 交叉轴上的对齐统一由 align-items 控制
基本上就这些。掌握 flex-direction 的使用，能让你在构建弹性布局时更加得心应手，无需依赖浮动或定位就能实现多样化的排列效果。
