flex-direction 动态定义主轴方向，justify-content 控制主轴对齐、align-items 控制交叉轴对齐；二者作用轴随主轴切换，非固定左右/上下。
flex-direction 决定主轴方向，不是“默认横着就永远横着”
很多人以为 justify-content 总是控制左右对齐、align-items 总是控制上下对齐——这是最大误区。真实情况是：主轴方向完全由 flex-direction 动态定义，而两个对齐属性的作用轴会随之切换。
比如：
-
flex-direction: row→ 主轴水平（左→右），justify-content管左右，align-items管上下 -
flex-direction: column→ 主轴垂直（上→下），justify-content管上下，align-items管左右
常见错误现象：把导航菜单设成 column 后发现文字挤在左边，死调 justify-content: center 没用——其实该调 align-items: center，因为此时“居中”发生在水平方向（交叉轴）。
justify-content 和 align-items 的作用对象根本不同
justify-content 调整的是所有项目在主轴上的**整体分布关系**，它不改变单个项目尺寸，只分配剩余空间；而 align-items 控制的是每个项目在交叉轴上的**单点对齐位置**，且默认值 stretch 会强制拉伸——这点极易被忽略。
立即学习“前端免费学习笔记（深入）”；
- 当容器有明确高度但子元素没设高时，
align-items: stretch（默认）会让它们撑满容器高度 - 如果子元素本身有
height或min-height，stretch就失效，此时align-items: center才真正起效 -
justify-content: space-between要求至少两个子元素才看得出效果；只有一个时，它等同于flex-start
实操建议：调试时先确认容器是否有宽/高约束，再看子元素是否设置了交叉轴尺寸，否则 align-items 行为可能和预期不符。
align-self 可以覆盖 align-items，但只对单个元素生效
align-self 是 align-items 的“局部 override”，它让某个子元素脱离统一规则，在交叉轴上独立对齐。但它的生效前提是父容器已启用 Flex 布局且设置了 align-items。
- 常见使用场景：表单中，多数输入框垂直居中，但提交按钮想贴底 —— 给按钮加
align-self: flex-end - 注意：
align-self: auto会恢复继承父容器的align-items值，不是“重置为默认” - 如果父容器没设
align-items，align-self仍按默认stretch行为执行，不是无效
容易踩的坑：在 flex-direction: column 容器里给某子项设 align-self: center，结果它跑到了容器水平中间——没错，这正是它该干的事，因为此时交叉轴是水平的。
圣杯布局和居中技巧背后，其实是轴线切换的自然结果
所谓“一行代码居中”，即 display: flex; justify-content: center; align-items: center;，本质是利用了主轴与交叉轴的正交性。但它能工作，依赖一个隐含前提：容器有明确的宽高边界（比如设置了 height 或被父容器限制）。
- 没有高度限制的 flex 容器，
align-items: center对子元素垂直居中无效，因为交叉轴（此时是垂直方向）长度不确定 - 圣杯布局中内容区用
flex: 1占位，靠的是主轴（column下为垂直）方向的剩余空间分配，不是靠 margin 或绝对定位 - 移动端常需
flex-direction: column-reverse把操作按钮提到最上面——此时主轴仍是垂直，但main start在底部，justify-content: flex-start反而让按钮出现在顶部
真正复杂的地方在于：轴线本身没有视觉标识，你得靠 flex-direction 推导出当前的 main start 和 cross start 方向，再决定用哪个属性去干预。这不是直觉反应，而是需要条件反射的思维切换。