答案：justify-content 控制主轴对齐，align-items 控制交叉轴对齐，二者配合实现居中、两端分布等布局；默认 row 时主轴为水平方向，column 时相反；常见用法包括 center 实现完全居中，space-between 实现两端对齐，导航栏常用 flex-start 与 center 组合；多行布局时 align-content 管理行间距，align-items 仍控制每行内元素的交叉轴对齐；响应式中可随屏幕尺寸调整主轴方向与对齐方式，灵活适配不同布局需求。
在使用 CSS Flexbox 布局时，justify-content 和 align-items 是两个最常用也最关键的属性。它们分别控制主轴和交叉轴上的对齐方式，配合使用可以轻松实现各种居中、分布和对齐效果。
理解主轴与交叉轴
Flex 容器的布局方向由 flex-direction 决定，这直接影响 justify-content 和 align-items 的作用方向：
- justify-content：控制子元素在主轴（main axis）上的对齐
- align-items：控制子元素在交叉轴（cross axis）上的对齐
例如，默认 flex-direction: row 时，主轴是水平方向，交叉轴是垂直方向；若设为 column，则相反。
常见组合用法
以下是几种实用且常见的搭配场景：
立即学习“前端免费学习笔记（深入）”；
1. 完全居中一个元素
让子元素在容器中水平垂直都居中：
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
适用于弹窗、登录框、卡片内容等需要居中的场景。
2. 左对齐但垂直居中
常用于导航栏或侧边栏菜单项的对齐：
.nav {
display: flex;
justify-content: flex-start; /* 靠左排列 */
align-items: center; /* 垂直居中 */
}
文字或图标会在容器中左侧对齐，同时高度方向上居中显示。
3. 两端对齐，垂直居中
适合页眉或按钮组布局：
.header {
display: flex;
justify-content: space-between; /* 两端对齐 */
align-items: center; /* 垂直居中 */
}
左右两边的元素贴边，中间留白自动分配，整体在垂直方向居中。
注意单行与多行的区别
align-items 只作用于单行 Flex 项目。如果换行（flex-wrap: wrap），且希望多行之间也对齐，应使用 align-content：
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center; /* 控制多行之间的对齐 */
align-items: center; /* 控制每行内项目的交叉轴对齐 */
height: 400px; /* 需要固定高度才能看出效果 */
}
此时 align-items 保证每行内的项目垂直居中，align-content 控制行与行之间的分布。
响应式中的灵活运用
在不同屏幕尺寸下，可调整这两个属性实现适配：
.card-group {
display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;
}
<p>@media (max-width: 768px) {
.card-group {
flex-direction: column;
align-items: center; /<em> 切换为竖向后，控制宽度对齐 </em>/
justify-content: flex-start; /<em> 主轴变为垂直，靠上对齐 </em>/
}
}</p>横向时居中排列并拉伸高度，竖向时堆叠并对齐宽度。
基本上就这些。掌握 justify-content 与 align-items 的配合，关键在于理清主轴方向，并根据布局目标选择合适的对齐方式。不复杂但容易忽略细节，多练习几种组合就能熟练应用。
