align-content用于多行flex或grid布局中控制行在交叉轴的整体对齐，常见取值有flex-start、center、space-between等，仅在换行时生效；单行对齐由align-items控制。
align-content 是 CSS 中用于控制多行 flex 容器内 Flex 项目在交叉轴上整体对齐方式的属性。它只在容器内的项目换行（即有多根轴线）时生效，且仅适用于 Flex 布局和 Grid 布局中的多行情况。
适用场景：Flex 布局中的多行对齐
当使用 flex-wrap: wrap 或 flex-wrap: wrap-reverse 允许项目换行时，可能会出现多行 flex 轴线。此时，align-content 决定这些轴线在交叉轴上的分布方式。
常见取值包括：
- flex-start：所有行向交叉轴起点对齐
- flex-end：所有行向交叉轴终点对齐
- center：所有行在交叉轴居中对齐
- space-between：行之间等距分布，首行在起点，末行在终点
- space-around：每行周围有相等空间
- space-evenly：所有行包括与边界之间的间距都相等
- stretch（默认值）：拉伸行以填满整个容器（在无固定高度时）
与 align-items 的区别
align-items 控制的是单行中各个项目在交叉轴上的对齐方式，而 align-content 控制的是多行之间的整体分布。
立即学习“前端免费学习笔记（深入）”；
如果只有一行 flex 项目，align-content 不会起作用，此时应使用 align-items 来调整对齐。
Grid 布局中的使用
在 CSS Grid 中，align-content 用于控制网格轨道在网格容器交叉轴上的对齐方式，比如多行轨道未占满容器高度时的分布。
基本上就这些。关键是记住：有多行才用 align-content，单行靠 align-items。不复杂但容易忽略两者的使用前提。
