Flex布局的坐标体系：主轴与侧轴的运行机制

在定义完容器和项目的基础角色之后，Flex布局进一步构建了一套完整的虚拟坐标系统，所有的对齐、空间分配规则都基于这套双轴体系运行，这也是Flex布局能够实现复杂排版的核心底层逻辑。

一、双轴体系的核心定义
弹性容器内部天然存在两条互相垂直的坐标轴：

主轴（Main Axis）：弹性项目排列的默认方向轴，它拥有明确的起点（main start）和终点（main end），所有弹性项目默认会沿着主轴从起点向终点依次排布。
侧轴（Cross Axis）：和主轴完全垂直的方向轴，也被称为交叉轴，同样拥有起点（cross start）和终点（cross end），它管控的是项目在垂直于排列方向上的对齐规则。
对应地，每个弹性项目也拥有两个维度的尺寸：

主轴尺寸（Main Size）：项目在主轴方向上占据的空间大小
侧轴尺寸（Cross Size）：项目在侧轴方向上占据的空间大小
场景示例：当我们设置主轴为水平方向时，项目默认从左到右横向排列，此时每个项目的宽度就是主轴尺寸，高度就是侧轴尺寸；如果我们通过修改属性把主轴切换为垂直方向，项目就会从上到下纵向排列，此时项目的高度就变成了主轴尺寸，宽度则成为侧轴尺寸，整个排版逻辑会沿着新的主轴自动适配。

这套双轴设计的精妙之处在于它的动态性：开发者不需要修改项目的任何样式，只需要切换主轴的方向，就能一键把横向导航栏改成纵向侧边菜单，排版逻辑完全复用，不需要重新编写适配代码。

二、主轴方向的灵活配置
Flex布局提供了flex-direction属性来自由定义主轴的指向，一共支持4种配置值：

属性值 主轴方向 排布效果
row 默认值，主轴沿水平从左到右 项目从左向右横向排列
row-reverse 主轴沿水平从右到左 项目从右向左反向横向排列
column 主轴沿垂直从上到下 项目从上向下纵向排列
column-reverse 主轴沿垂直从下到上 项目从下向上反向纵向排列
典型应用场景：移动端的底部Tab导航，在横屏适配时，我们可以直接把flex-direction从row改为column，导航就会自动变成纵向排布，适配横屏的侧边显示区域，不需要重新调整每个Tab按钮的样式。

三、双轴体系的工程价值
这套坐标体系彻底打破了传统CSS排版中“横向块级堆叠、纵向行内排列”的固有逻辑，给开发者提供了完全自由的排布能力：
传统布局中要实现一个“先纵向排列、再整体反向”的效果，需要修改DOM的顺序、调整大量浮动和定位属性；而在Flex双轴体系下，只需要修改一行主轴方向的属性值，就能完成所有项目的排布切换，完全不需要改动DOM结构，让页面的响应式适配逻辑变得极其简洁。
比如在响应式断点下，PC端页面是横向多栏布局，移动端自动切换为纵向单栏布局，只需要在媒体查询中修改容器的flex-direction属性，就能完成整套布局的适配，不需要编写大量冗余的适配样式代码。