答案是justify-content控制主轴对齐，align-items控制交叉轴对齐，二者结合可实现如居中、分散排列等布局效果。
在使用 CSS Flexbox 布局时，justify-content 和 align-items 是控制元素在容器中对齐方式的核心属性。它们分别作用于主轴（main axis）和交叉轴（cross axis），通过组合使用可以实现各种灵活的居中与对齐效果。
理解主轴与交叉轴
Flexbox 是一种一维布局模型，布局方向由 flex-direction 决定：
- 当 flex-direction: row（默认值）时，主轴为水平方向，交叉轴为垂直方向。
- 当 flex-direction: column 时，主轴为垂直方向，交叉轴为水平方向。
justify-content 控制主轴上的对齐，align-items 控制交叉轴上的对齐。
justify-content：主轴对齐方式
该属性定义了项目在主轴上的分布方式，常见取值包括：
立即学习“前端免费学习笔记（深入）”；
- flex-start：项目向主轴起点对齐。
- flex-end：项目向主轴终点对齐。
- center：项目居中对齐。
- space-between：项目均匀分布，首尾项目贴边，中间间距相等。
- space-around：项目周围空间均匀，视觉间隔相等。
- space-evenly：项目间及边缘间距完全相等。
align-items：交叉轴对齐方式
该属性定义了项目在交叉轴上的对齐方式，常见取值有：
- flex-start：项目向交叉轴起点对齐。
- flex-end：项目向交叉轴终点对齐。
- center：项目在交叉轴上居中。
- baseline：项目按基线对齐，适合文本类内容。
- stretch：项目拉伸以填满容器（前提是项目未设置固定尺寸）。
常见组合示例
结合两个属性，可快速实现多种布局需求：
-
水平垂直居中：
justify-content: center; align-items: center;
适用于弹窗、卡片、加载动画等需要居中的场景。 -
顶部左对齐：
justify-content: flex-start; align-items: flex-start;
默认布局行为，适合常规流式排列。 -
底部居中：
justify-content: center; align-items: flex-end;
常用于页脚或提示信息定位。 -
垂直居中，水平分散：
当 flex-direction: column 时，
justify-content: center; align-items: stretch;
实现侧边栏或垂直菜单的紧凑布局。
基本上就这些。掌握 justify-content 与 align-items 的配合，能让你用几行代码完成复杂的对齐需求，是构建响应式界面的基础技能。不复杂但容易忽略的是轴的方向变化带来的影响，记得先确定 flex-direction。
