flex-direction的四个合法值为：row（左→右）、row-reverse（右→左）、column（上→下）、column-reverse（下→上），分别定义主轴方向，影响justify-content、align-items行为及尺寸属性生效轴。
flex-direction 的四个合法值分别对应什么布局方向
flex-direction 控制的是 flex 容器主轴的走向，不是“横竖切换”这么模糊——它决定子元素从哪开始排、往哪延伸。四个值里只有两个常用：row（默认，左→右）、column（上→下）。另外两个是反向变体：row-reverse（右→左）、column-reverse（下→上）。
常见错误是以为 row 在所有设备上都显示为“横向”，其实它受书写模式影响；在 direction: rtl 下，row 仍是逻辑左→右，但视觉上变成右→左。
- 移动端竖屏时想让按钮垂直堆叠？用
flex-direction: column - 需要右对齐的导航栏？别只靠
justify-content，先确认主轴方向是row，否则flex-end会作用在错误轴上 -
column下width失效很常见——因为主轴变成垂直，宽度变成“交叉轴”，要调align-items或子项自身width
flex-direction 改变后，justify-content 和 align-items 的行为怎么变
这两个属性永远绑定主轴/交叉轴：justify-content 管主轴对齐，align-items 管交叉轴对齐。一旦你把 flex-direction 从 row 改成 column，原来水平居中的 justify-content: center 就变成垂直居中，而原本没效果的 align-items: center 反而开始水平居中了。
容易踩的坑：改完方向后发现元素“跑偏”，大概率是没同步调整这两个对齐属性。
- 原
flex-direction: row; justify-content: flex-end;→ 改为column后，justify-content: flex-end变成“底部对齐”，不是“右对齐” - 如果希望保持“右对齐”语义，得把对齐逻辑挪到
align-items: flex-end（因为此时交叉轴是水平的） - 注意
align-items默认值是stretch，在column下会让子项高度撑满容器，常导致意外拉伸
flex-direction: column 在实际项目中为什么经常导致高度塌陷
典型现象：父容器设了 display: flex; flex-direction: column;，但高度没内容高，子元素溢出或被裁剪。根本原因是 flex 容器默认不继承父级高度，而 column 方向下，子项的 height 属性不再沿主轴生效（主轴是垂直的，height 是交叉轴尺寸），必须显式控制容器高度或用 flex 相关属性分配空间。
- 给父容器加
height: 100vh或min-height: 100vh是最快解法 - 更健壮的做法是让某个子项“占剩余空间”：给它设
flex: 1（等价于flex: 1 1 0），前提是其他兄弟项没设固定高度 - 避免在
column布局里给子项设height: 100%——它参考的是父容器的 height，而父容器很可能没 height
响应式中用媒体查询切换 flex-direction 的注意事项
用 @media 切换 flex-direction 很常见，但要注意：它只是改变排列方向，不自动修正对齐、间距、尺寸等配套样式。比如桌面端用 row + justify-content: space-between，切到 column 后，space-between 会把元素挤到首尾，中间大片空白——这不是 bug，是预期行为。
- 每次切换方向，都要重新评估
justify-content、align-items、gap是否仍合理 - 慎用
flex-wrap: wrap配合column——浏览器对垂直换行支持有限，多数情况会忽略 - 在 Safari 旧版本中，
flex-direction: column下margin: auto垂直居中可能失效，优先用align-items/justify-content
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
