先记住这个答案
在 CSS Flex 布局中，主轴由 flex-direction 属性定义，交叉轴永远与主轴垂直。当 flex-direction 为 row 或 row-reverse 时，主轴沿内联方向（水平），交叉轴沿块方向（垂直）；当为 column 或 column-reverse 时，主轴沿块方向（垂直），交叉轴沿内联方向（水平）。几何轴的对应关系基于书写模式，水平书写模式下如上所述。理解交叉轴方向是正确使用 align-items、align-content 等属性的基础。
- 交叉轴恒垂直主轴，由 flex-direction 决定。
- row 时交叉轴垂直，column 时交叉轴水平。
- 交叉轴方向受书写模式影响，需按逻辑轴理解。
主轴与交叉轴的几何关系机制
Flex 布局中，主轴方向由 flex-direction 决定，取值 row、row-reverse、column、column-reverse。交叉轴被规范定义为垂直于主轴的另一个轴，不存在例外。当主轴沿内联方向（默认水平）时，交叉轴沿块方向（垂直）；当主轴沿块方向（默认垂直）时，交叉轴沿内联方向（水平）。
几何轴并非绝对上下左右，而是相对于书写模式。例如在 direction: rtl 下，row 的主轴从右向左，交叉轴仍垂直；在垂直书写模式（writing-mode: vertical-rl）下，row 的主轴变为垂直，交叉轴变为水平。因此，判断交叉轴必须结合主轴方向和书写模式，不能仅凭 row 或 column 字面推断。
实际场景：column 方向导航栏的居中与对齐
假设需要实现垂直导航栏，要求每个按钮水平居中。设置容器 display: flex; flex-direction: column;，主轴自上而下，交叉轴水平。此时 align-items: center 正确让按钮水平居中，因为 align-items 作用于交叉轴。若误用 justify-content: center，则只会垂直居中，达不到水平居中效果，这是常见错误。
若按钮宽度不一，希望贴左对齐，可设 align-items: flex-start；若希望按钮拉伸填满容器宽度，则用默认 stretch。通过场景可清晰看到，交叉轴方向判断直接影响 align-items 的选择，是布局正确性的基础。
适用边界：书写模式与 wrap-reverse 的影响
使用 flex-wrap: wrap 时，多行沿交叉轴堆积，但交叉轴方向始终垂直主轴，只是行排列方向受影响。wrap-reverse 会交换交叉轴的起点和终点，但轴的方向不变。此外，垂直书写模式下，row 的交叉轴变为水平，column 的交叉轴变为垂直，导致几何轴对应完全翻转，因此不能机械套用默认规则。
另一个边界是 row-reverse 和 column-reverse 仅反向主轴起点和终点，交叉轴方向保持垂直，但 align-items: flex-start 的对齐位置仍取决于交叉轴起点，而交叉轴起点默认与块起始一致。需区分主轴反转与交叉轴反转，避免误用。
容易答错的地方
- 误以为 row-reverse 翻转交叉轴
- 实际
row-reverse仅反向主轴，交叉轴仍然垂直，align-items行为不变。翻转交叉轴的属性是flex-wrap: wrap-reverse，它交换交叉轴起点和终点。 - 一概认为 column 交叉轴是水平
- 水平书写模式下成立，但在垂直书写模式下，
column主轴沿块方向（水平），交叉轴变为垂直。必须结合writing-mode判断，不可死记硬背。
面试官还会怎么问？
交叉轴起点和终点如何确定？
交叉轴起点由书写模式和 flex-wrap 共同决定。默认 wrap 下与块起始一致，wrap-reverse 会翻转起点和终点。主轴反转不影响交叉轴起点。
align-items 与 align-content 都作用于交叉轴，区别是什么？
align-items 对齐单个 flex 项在交叉轴的位置，align-content 对齐多行 flex line 的整体分布。仅当容器有换行时 align-content 才生效。
在 RTL 语言下，flex-direction: row 时交叉轴方向会变吗？
交叉轴方向仍是垂直方向，因为水平书写模式下块方向不变。但主轴起点变为右，交叉轴起点仍在顶部，因此对齐效果与 LTR 类似。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。