justify-content控制主轴对齐，align-items控制交叉轴对齐；例如flex-direction:row时，justify-content管水平方向，align-items管垂直方向，二者结合可实现元素居中布局。
在CSS Flex布局中，align-items 和 justify-content 是两个常用的对齐属性，它们控制容器内子元素的排列方式，但作用的方向不同。理解它们的区别，是掌握Flex布局的关键。
主轴与交叉轴：Flex布局的基础方向
Flex布局基于两个轴：主轴（main axis）和交叉轴（cross axis）。子元素沿着主轴排列，而对齐则分别在这两个轴上进行。
- 主轴方向由 flex-direction 决定，默认是 row（从左到右）
- 交叉轴垂直于主轴。例如主轴为 row 时，交叉轴就是 vertical（从上到下）
justify-content：控制主轴上的对齐
justify-content 调整子元素在主轴方向上的分布方式，适用于有剩余空间的情况。
- flex-start：元素向主轴起点对齐（默认）
- flex-end：向主轴终点对齐
- center：居中对齐
- space-between：两端对齐，中间间距相等
- space-around：每个元素周围有相等空间
- space-evenly：所有元素间及边缘间距完全相等
例如：flex-direction: row 时，justify-content 控制左右分布；若设为 column，则控制上下分布。
立即学习“前端免费学习笔记（深入）”；
align-items：控制交叉轴上的对齐
align-items 定义子元素在交叉轴上的对齐方式，类似于 justify-content，但方向不同。
- flex-start：向交叉轴起点对齐
- flex-end：向交叉轴终点对齐
- center：交叉轴居中
- stretch：拉伸以填满容器（默认，前提无固定高度）
- baseline：按文本基线对齐
比如容器高度大于子元素时，使用 center 可让所有项目垂直居中。
实际例子对比
假设有一个横向排列的Flex容器：
display: flex; flex-direction: row; justify-content: center; align-items: center;
效果是：子元素在水平方向居中（主轴），同时在垂直方向也居中（交叉轴），实现真正的居中对齐。
基本上就这些。记住：justify-content 管“主方向”，align-items 管“垂直方向”，结合 flex-direction 就能准确判断它们的作用。不复杂但容易忽略方向依赖。
