align-content用于控制多行在交叉轴的分布，align-self则调整单个项目的对齐方式。前者作用于容器，需配合flex-wrap和固定高度使用，取值如flex-start、center、space-between等；后者设置在子元素上，可覆盖align-items，实现独立对齐。两者结合可精细控制多行布局，如网格中整体均匀分布且突出项居中。
在使用 Flexbox 布局时，当容器中的子元素换行成多行后，想要控制这些行之间的对齐方式，就需要用到 align-content 和 align-self 属性。它们分别用于控制多行整体的分布和单个项目的垂直对齐行为。
理解 align-content 控制多行分布
align-content 作用于 flex 容器，用来定义当有多根交叉轴行（即换行）时，这些行在交叉轴上的对齐方式。它只在 flex-wrap: wrap 或 wrap-reverse 且存在多行时才生效。
常用取值包括：
- flex-start：所有行堆叠在交叉轴起点
- flex-end：所有行堆叠在交叉轴终点
- center：所有行居中对齐
- space-between：行之间均匀分布，首尾行贴边
- space-around：每行周围有相等空间
- space-evenly：行间及边缘间距完全相等
.container {
display: flex;
flex-wrap: wrap;
align-content: space-between;
height: 300px; /* 必须设定高度才能看到效果 */
}
.item {
width: 100px;
height: 50px;
}
若容器高度足够且项目换行，align-content: space-between 会让各行在垂直方向均匀分布。
使用 align-self 调整单个项目对齐
align-self 设置在单个 flex 项目上，用于覆盖容器的 align-items 设置，控制该项目在交叉轴上的对齐方式。
常见取值：
- auto：默认值，继承父容器的 align-items
- flex-start：顶部对齐
- flex-end：底部对齐
- center：居中对齐
- stretch：拉伸填满容器（默认）
- baseline：基线对齐
.container {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.special-item {
align-self: center; /* 单独居中 */
}
即使其他项目被拉伸，.special-item 会单独在交叉轴上居中。
结合使用实现精细布局控制
实际开发中，常将两者结合使用。比如创建一个卡片网格，整体行分布均匀，但某个特殊卡片需要独立对齐。
.grid {
display: flex;
flex-wrap: wrap;
align-content: space-around;
align-items: flex-start;
height: 400px;
}
.card {
width: 120px;
height: 80px;
}
.highlight {
align-self: center; /* 突出显示的卡片垂直居中 */
}
这样，整个网格的行按 space-around 分布，而特定卡片通过 align-self 实现独立定位。
基本上就这些。掌握 align-content 处理多行分布，配合 align-self 微调个别元素，就能灵活控制 Flexbox 多行布局的对齐效果。注意容器必须设高度或内容不足，才能看到 align-content 的作用。
