主轴由flex-direction决定，是flex项目排列的主方向，默认为水平；交叉轴垂直于主轴，其方向随主轴变化，align-items和justify-content的对齐作用方向也随之改变。
在使用 CSS Flexbox 布局时，主轴（main axis）和交叉轴（cross axis）是理解元素排列方式的核心概念。它们不是固定的方向，而是由 flex 容器的 flex-direction 属性决定的。
主轴（Main Axis）是什么？
主轴是 flex 项目（flex items）主要排列的方向。默认情况下，主轴是水平方向（从左到右）。
通过设置 flex-direction 可以改变主轴方向：
- row：主轴为水平方向，项目从左到右排列（默认值）
- row-reverse：主轴仍为水平方向，但项目从右到左排列
- column：主轴变为垂直方向，项目从上到下排列
- column-reverse：主轴为垂直方向，项目从下到上排列
主轴的起点叫做 main start，终点是 main end。项目沿主轴依次排列，justify-content 控制项目在主轴上的对齐方式。
立即学习“前端免费学习笔记（深入）”；
交叉轴（Cross Axis）如何确定？
交叉轴始终垂直于主轴。也就是说，主轴方向确定后，交叉轴方向也就自动确定了。
- 当主轴是水平方向（row）时，交叉轴就是垂直方向
- 当主轴是垂直方向（column）时，交叉轴就是水平方向
交叉轴的起点叫 cross start，终点是 cross end。容器的 align-items 和 align-content 属性控制项目在交叉轴上的对齐。
实际例子帮助理解
假设有一个 flex 容器：
.container {
display: flex;
flex-direction: row;
}
此时：
- 主轴：水平方向（从左到右）
- 交叉轴：垂直方向（从上到下）
- justify-content 控制左右对齐
- align-items 控制上下对齐
如果改成：
.container {
display: flex;
flex-direction: column;
}
那么：
- 主轴：垂直方向（从上到下）
- 交叉轴：水平方向（从左到右）
- justify-content 控制上下对齐
- align-items 控制左右对齐
基本上就这些。关键是记住：主轴由 flex-direction 决定，交叉轴与之垂直。一旦方向变了，justify-content 和 align-items 的作用方向也随之改变。
