主轴和交叉轴的方向由flex-direction决定，justify-content控制主轴对齐，align-items控制交叉轴对齐，结合使用可实现居中、圣杯布局等常见页面布局。
在使用 CSS Flexbox 布局时，理解主轴（main axis）和交叉轴（cross axis）是掌握对齐与布局控制的关键。它们不是固定的方向，而是由 flex-direction 决定的动态概念。只要弄清这两个轴的关系，就能轻松实现各种常见的页面布局需求。
主轴与交叉轴的基本定义
Flex 容器中的项目默认沿主轴排列，而交叉轴则垂直于主轴。具体方向取决于容器的 flex-direction 属性设置：
一旦确定了主轴方向，所有对齐属性的行为也随之明确。
主轴上的对齐：justify-content
justify-content 控制项目在主轴方向上的对齐方式。常见取值包括：
立即学习“前端免费学习笔记（深入）”；
例如，在导航栏布局中，使用 justify-content: space-between 可让第一个菜单项靠左、最后一个靠右，中间自动均分空间。
交叉轴上的对齐：align-items 与 align-self
align-items 定义所有项目在交叉轴上的对齐方式，适用于整个容器：
若只想调整某个特定项目，可用 align-self 覆盖 align-items 的设置。比如在一个垂直居中的容器中，让其中一个元素顶部对齐，只需设置该元素的 align-self: flex-start。
实用布局场景示例
结合主轴与交叉轴控制，可以快速实现多种经典布局：
display: flex; justify-content: center; align-items: center; 即可实现水平垂直居中，无需计算尺寸或使用定位flex-direction: column，内容区使用 flex: 1 占据剩余空间，通过 justify-content 控制内部元素分布margin-top: auto 将其推到底部这些技巧减少了对浮动、定位和 JavaScript 计算高度的依赖，使布局更灵活且响应式友好。
基本上就这些。主轴和交叉轴的理解核心在于“方向由 flex-direction 决定”，之后所有对齐属性都围绕这两个轴展开。多练习几种组合，就能熟练应对大多数现代网页布局需求。
