css Flexbox主轴与交叉轴区别
主轴由flex-direction决定，子元素沿主轴排列，justify-content控制其对齐；交叉轴垂直于主轴，align-items控制子元素在交叉轴上的对齐方式。
在 CSS Flexbox 布局中，主轴（main axis）和交叉轴（cross axis）是两个核心概念，它们决定了子元素（flex items）在容器中的排列方向和对齐方式。
主轴（Main Axis）
主轴是 flex 容器中主要的布局方向。默认情况下，主轴是水平方向（从左到右）。这个方向由 flex-direction 属性决定。
- 当 flex-direction: row 时，主轴沿水平方向延伸
- 当 flex-direction: column 时，主轴沿垂直方向延伸
- 子
元素沿着主轴依次排列 - justify-content 控制子元素在主轴上的对齐方式
元素沿着主轴依次排列交叉轴（Cross Axis）
交叉轴始终垂直于主轴。它是次要的布局方向，用于控制子元素在另一个维度上的对齐。
- 如果主轴是水平的（row），交叉轴就是垂直的
- 如果主轴是垂直的（column），交叉轴就是水平的
- align-items 和 align-self 控制子元素在交叉轴上的对齐方式
实际示例说明
假设有一个 flex 容器设置为：
display: flex;flex-direction: row;
- 主轴：从左到右
- 子元素从左往右排列
- 交叉轴：从上到下
- align-items: center; 会让所有子元素在垂直方向居中
如果改为：
flex-direction: column;- 主轴：从上到下
- 子元素从上往下排列
- 交叉轴：从左到右
- justify-content 控制垂直方向的对齐，align-items 控制水平方向
理解主轴和交叉轴的关系，关键在于记住：交叉轴永远与主轴垂直。只要确定了 flex-direction，就能判断出两个轴的方向，进而正确使用对齐属性。
