先记住这个答案
align-content: space-between 的效果是：把第一行推到交叉轴起点（通常是顶部），把最后一行推到交叉轴终点（通常是底部），中间剩余的空间平均分给相邻行之间的间隔。如果容器里只有一行，没有间隔可分，效果就和 flex-start 一样——行贴在顶部。
- 首行贴顶、末行贴底
- 剩余空间等分给行间隔
- 只有一行时等同于
flex-start - 前提是
flex-wrap: wrap且实际换行
多行时的空间分配过程
浏览器先算出每行的高度，再用容器的交叉轴尺寸减去所有行的高度总和，得到剩余空间。然后把剩余空间除以「行数减一」，得到每个间隔的大小。
比如容器高 400px，三行各高 60px，剩余空间是 400 - 180 = 220px，两个间隔各分 110px。
space-between 效果CSS.container {
display: flex;
flex-wrap: wrap;
align-content: space-between;
height: 400px;
width: 200px;
}
.item {
width: 80px;
height: 60px;
}
/* 假设每行放 2 个 item，共 6 个 item = 3 行 */
/* 第一行贴顶，第三行贴底，中间行居中 */这种布局在卡片列表里很常见：顶部和底部对齐容器边缘，中间自动等距排列。
只有一行时的退化行为
space-between 的计算公式里有「行数减一」。只有一行时行数是 1，没有间隔要分配，唯一的那一行停在交叉轴起点，视觉上和 flex-start 没区别。
这也是为什么只有一行时 space-between、space-around、flex-start 看起来都一样。想看到差别，至少需要两行。
和 space-around、space-evenly 的区别
space-around 给每行的上下两侧各加一份间距，相邻行之间的间隔是两端的两倍。space-evenly 则让所有间隔（包括第一行上方和最后一行下方）都相等。space-between 两头没有间距，空间全分给中间。
实际项目中 space-between 用得最多，因为视觉上贴边的效果更紧凑。
容易答错的地方
- 忘了
flex-wrap: wrap align-content要在多行容器里才有效。如果只加了align-content: space-between但没有flex-wrap: wrap，子项不会换行，只有一条 flex line，设什么都看不到效果。- 把
align-content当成justify-content用 justify-content: space-between是在主轴上给子项之间分配空间。align-content: space-between是在交叉轴上给行之间分配空间。两者方向不同、作用对象也不同。
面试官还会怎么问？
align-content: space-between 和 gap 能一起用吗？
可以。gap（或 row-gap）设的是行之间的最小间距，space-between 分配的间距会叠加在 gap 之上。如果剩余空间不够，gap 优先保证，space-between 的额外间距可能为零。
容器高度不够放下所有行会怎样？
行会溢出容器。space-between 只在有剩余空间时才分配间距，如果行的总高度已经超过容器高度，行之间的间隔变成零，所有行紧紧挤在一起甚至溢出。
怎么让两行之间的间距固定而不是自动计算？
用 row-gap 属性。row-gap: 20px 会在每两行之间固定留出 20px 间距，不受容器高度变化的影响。space-between 是弹性的、gap 是固定的。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。