flex-direction定义主轴方向，决定justify-content（主轴对齐）和align-items（交叉轴对齐）的行为：row/column为主轴水平/垂直，row-reverse/column-reverse反转起点；gap比margin更可靠；column布局需设overflow-y: auto防裁剪。
flex-direction 决定子元素排列方向，不是“从左到右”那么简单
它直接定义 flex 容器的主轴（main axis），进而影响 justify-content、align-items 等属性的行为。设错 flex-direction，后面所有对齐都可能“看起来不对劲”。
-
row（默认）：主轴水平，起点在左 → 子项从左往右排 -
row-reverse：主轴仍是水平，但起点在右 → 子项从右往左排，justify-content: flex-start会贴右边界 -
column：主轴垂直，起点在上 → 子项从上往下排，此时justify-content控制的是垂直方向对齐 -
column-reverse：主轴垂直，起点在下 → 子项从下往上排，align-items: flex-end会贴底部
justify-content 在 column 布局下为什么“没反应”？
因为 justify-content 只作用于主轴方向。当 flex-direction: column 时，主轴是垂直的，所以它控制的是**上下对齐**，不是左右。想控制左右，得用 align-items —— 它管的是交叉轴（cross axis）。
- 主轴 =
flex-direction的方向 - 交叉轴 = 垂直于主轴的方向
-
justify-content：沿主轴对齐（比如column下是 top/middle/bottom） -
align-items：沿交叉轴对齐（比如column下是 left/center/right）
flex-direction: row-reverse 会导致 :first-child 和 :last-child 逻辑反转
CSS 伪类按 DOM 顺序匹配，不随视觉顺序改变。但 row-reverse 只改变渲染顺序，DOM 顺序不变 —— 所以 :first-child 还是第一个元素，只是它被画在最右边了。
- 视觉上最右的元素 ≠ DOM 中的
:last-child - 如果用
margin-left给相邻项加间隔，row-reverse下容易漏掉首项或重复加 - 更稳妥的方式是用
gap：它不受flex-direction影响，始终在相邻 flex 项之间生效
移动端竖屏常用 column，但别忘了滚动容器高度限制
设 flex-direction: column 后，若父容器高度固定（如 height: 100vh），子项总高度超限时，内容会被裁剪，而不是自动滚动。
立即学习“前端免费学习笔记（深入）”；
- 必须显式设置
overflow-y: auto才能出现滚动条 - 若子项用了
flex: 1，注意它会拉伸填满剩余空间，可能挤占其他项 - 在
column布局中，min-height比height更安全，避免内容撑不开容器
.container {
display: flex;
flex-direction: column;
height: 100vh;
overflow-y: auto;
}
主轴方向不是视觉习惯的简单映射，而是整个 flex 对齐逻辑的起点。改 flex-direction 前，先确认 justify-content 和 align-items 是否还符合你当前的主轴/交叉轴预期。 
