答案：align-items控制交叉轴对齐，justify-content控制主轴对齐。1. 二者组合可实现居中、对齐等布局；2. 需先设display:flex；3. flex-direction改变时主轴方向随之变化。
在使用 CSS Flexbox 布局时，align-items 和 justify-content 是两个核心属性，它们分别控制交叉轴和主轴上的对齐方式。合理组合这两个属性，可以快速实现各种居中、对齐和分布布局。
理解主轴与交叉轴
Flexbox 是一种一维布局模型，它有主轴（main axis）和交叉轴（cross axis）：
- 主轴方向由 flex-direction 决定（默认为 row，即水平方向）
- justify-content 控制主轴上的对齐（如左、右、居中、分散）
- align-items 控制交叉轴上的对齐（如上、下、居中）
常见组合用法
以下是最常用的几种组合，适用于大多数居中和对齐场景：
1. 水平垂直居中：居中一个或多个子元素
立即学习“前端免费学习笔记（深入）”；
当需要将内容在容器中完全居中时：
.container {
display: flex;
justify-content: center; /* 主轴居中（水平） */
align-items: center; /* 交叉轴居中（垂直） */
}
无论子元素大小如何，都会在父容器中居中显示。
2. 顶部左对齐：类似默认文档流
让子元素靠左对齐，顶部排列：
.container {
display: flex;
justify-content: flex-start; /* 主轴起点对齐（左） */
align-items: flex-start; /* 交叉轴起点对齐（上） */
}
3. 底部居中：固定在底部并水平居中
适合做页脚或提示框布局：
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: flex-end; /* 垂直靠底 */
height: 200px;
}
4. 垂直居中，水平分散
子元素高度居中，但水平方向均匀分布：
.container {
display: flex;
justify-content: space-between; /* 两端对齐，中间等距 */
align-items: center; /* 垂直居中 */
}
常用于导航栏布局。
注意事项
使用这两个属性时注意以下几点：
- 必须先设置 display: flex 或 display: inline-flex，否则属性无效
- 如果 flex-direction: column，主轴变为垂直方向，justify-content 控制垂直对齐，align-items 控制水平对齐
- 子元素的 margin: auto 在 Flex 容器中仍可覆盖 align-items 和 justify-content
基本上就这些。掌握 justify-content 管“主方向”，align-items 管“另一个方向”的逻辑，就能灵活应对多数布局需求。
