17370845950

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 是否还符合你当前的主轴/交叉轴预期。