选择 flex-direction: row 还是 column 取决于元素排列方向。row 用于水平排列，适合导航栏、按钮组等横向布局，主轴为水平方向，子元素沿行排列，节省垂直空间；column 用于垂直排列，适用于表单、菜单列表等纵向结构，主轴为垂直方向，内容从上到下堆叠，符合阅读习惯。判断依据是用户视线起点与扩展方向：从左到右选 row，从上到下选 column。响应式设计中可结合媒体查询切换。需注意方向改变会影响 justify-content 和 align-items 的主轴与交叉轴对应关系。
选择 flex-direction: row 还是 column，关键看元素的排列方向需求。简单来说，row 是水平排列，column 是垂直排列。根据页面布局结构来决定更合适的方向。
使用 row 的场景
当希望子元素从左到右水平排列时，使用 row。适合导航栏、按钮组、标签页这类需要横向展示的内容。
- 主轴方向为水平，子元素沿行方向排列
- 适用于宽度足够、希望节省垂直空间的布局
- 默认值，大多数情况下无需额外设置
使用 column 的场景
当内容需要从上到下垂直排列时，选择 column。常见于表单、菜单列表、侧边栏等纵向结构。
- 主轴变为垂直方向，子元素逐行向下堆叠
- 适合移动端或窄屏布局，内容按阅读习惯自然流动
- 表单项、标题与内容组合通常更适合竖向排布
如何快速判断用哪个？
思考两个问题：用户从哪里开始看？内容多时往哪个方向扩展？
立即学习“前端免费学习笔记（深入）”；
- 如果答案是“从左到右”“往右延展”，选 row
- 如果答案是“从上到下”“往下滚动”，选 column
- 响应式设计中可结合媒体查询切换方向
基本上就这些。把握住视觉流向和内容结构，选择就变得很自然了。不复杂但容易忽略的是，改变 flex-direction 会同时影响 justify-content 和 align-items 的表现，调整时要注意主轴和交叉轴的变化。
