先记住这个答案
flex 布局的核心概念是两条轴。主轴的方向由 flex-direction 决定：row 时主轴水平（从左到右），column 时主轴垂直（从上到下）。交叉轴永远垂直于主轴。所有 flex 对齐属性都是相对轴来定义的：justify-content 沿主轴分配空间，align-items 沿交叉轴对齐子项。
flex-direction决定主轴方向- 交叉轴始终垂直于主轴
justify-content管主轴align-items管交叉轴
四个 flex-direction 值对应的轴方向
flex-direction 有四个值，分别决定了主轴的方向和子项的排列顺序。
row 是默认值，主轴水平、子项从左到右排。row-reverse 主轴还是水平，但子项从右到左排。column 主轴变成垂直、子项从上到下排。column-reverse 主轴垂直、子项从下到上排。
/* row（默认）: 主轴 → 水平，交叉轴 ↓ 垂直 */
.row { flex-direction: row; }
/* column: 主轴 ↓ 垂直，交叉轴 → 水平 */
.col { flex-direction: column; }
/* row-reverse: 主轴 ← 水平反向，交叉轴 ↓ 垂直 */
.row-rev { flex-direction: row-reverse; }
/* column-reverse: 主轴 ↑ 垂直反向，交叉轴 → 水平 */
.col-rev { flex-direction: column-reverse; }reverse 只改变子项在主轴上的排列方向，不改变交叉轴。所以 row-reverse 下 align-items 仍然管垂直方向。
为什么要用「轴」来思考而不是「上下左右」
刚学 flex 时很多人把 justify-content 记成「管水平」、align-items 记成「管垂直」。flex-direction: row 时这确实成立，但一旦改成 column，方向就全反了。
正确的理解方式是：先看 flex-direction 确定主轴方向，然后 justify-content 跟着主轴走，align-items 跟着交叉轴走。这样不管方向怎么变，属性的行为永远一致。
面试时如果能用「主轴」「交叉轴」来回答，而不是说「水平」「垂直」，面试官会觉得你理解得比较透。
容易答错的地方
- 说
justify-content管水平方向 - 只有
row时才对。column下justify-content管的是垂直方向。准确的说法是：justify-content管主轴方向。 - 以为
reverse会改变交叉轴 row-reverse只是让子项从右到左排列，交叉轴仍然是垂直的。align-items: flex-start依然是靠上对齐，不会变成靠下。
面试官还会怎么问？
flex-start 在不同方向下指的是哪里？
flex-start 指主轴或交叉轴的起点。row 下主轴起点是左边，column 下主轴起点是上面。row-reverse 下主轴起点是右边。具体位置取决于轴的方向和是否 reverse。
writing-mode 会影响主轴方向吗？
会。默认的 writing-mode: horizontal-tb 下，row 的主轴是从左到右。如果改成 vertical-rl，row 的主轴变成从上到下。不过这在面试中很少考。
Grid 布局也有主轴和交叉轴的概念吗？
Grid 不用「主轴」「交叉轴」的说法，而是用「行轴」和「列轴」（或者叫 inline axis 和 block axis）。Grid 的 justify-* 沿行轴工作，align-* 沿列轴工作。方向不随属性变化，比 flex 更直观。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。