align-content用于控制多行弹性容器中行在交叉轴上的对齐方式，作用于行整体而非单个项目。当flex-wrap启用且容器在交叉轴有剩余空间时，该属性通过flex-start、center、space-between、space-around、stretch等值决定行的分布。它与align-items不同：后者处理单行内项目的对齐，前者管理多行间的空间分配。典型应用场景包括卡片网格、响应式布局及内容填充。与gap协同时，gap先设定行间固定间距，align-content再分配剩余空间，实现精细垂直布局控制。
align-content属性在 CSS 多行布局中，主要是用来控制当弹性容器（flex container）中的项目（flex items）发生换行（即
flex-wrap设置为
wrap或
wrap-reverse）时，这些“行”在交叉轴（cross axis）上的对齐方式。说白了，它决定了多行项目作为一个整体，如何在容器的垂直方向上分配剩余空间。它关注的是行与行之间的空间分配，而不是单个项目在行内的对齐。
解决方案
在我看来，理解
align-content的关键在于它的作用对象是“行”，而不是“项目”。当你的弹性容器设置了
flex-wrap: wrap;并且有多行内容时，如果容器的交叉轴方向（通常是高度）有剩余空间，
align-content就派上用场了。它能让你灵活地控制这些行是堆叠在一起、分散开来，还是均匀分布。
具体来说，
align-content有几个核心值，每种都有其独特的表现：
-
normal
: 这是默认值，行为与stretch
类似，除非没有额外的空间。 -
flex-start
: 所有行会堆叠在容器的交叉轴起始位置。想象一下，所有行都紧贴着容器的顶部（如果交叉轴是垂直方向）。 -
flex-end
: 所有行会堆叠在容器的交叉轴结束位置。它们会紧贴着容器的底部。 -
center
: 所有行作为一个整体，会居中放置在容器的交叉轴上。上下两边的空白空间会大致相等。 -
space-between
: 这是我个人比较喜欢用的一个值，它会在行之间平均分配剩余空间，第一行紧贴起始位置，最后一行紧贴结束位置。这对于需要内容垂直分散的布局非常有用。 -
space-around
: 这个值会在每行的两侧都留出相等的空间，所以行之间的空间会是行与容器边缘空间的两倍。 -
stretch
: （这也是我经常遇到的一个情况）如果项目没有设置固定的高度，并且容器有剩余空间，stretch
会让每行拉伸，以填充所有可用的交叉轴空间，确保每行的高度相同。这在需要所有行高度一致的卡片布局中特别实用。
举个例子，假设你有一个图片画廊，图片大小不一，并且希望它们能自动换行。如果容器高度足够，你可能希望这些行能垂直居中，或者均匀分散。这时，给容器设置
display: flex; flex-wrap: wrap; align-content: center;或
align-content: space-between;就能达到你想要的效果。这比手动计算每个行的位置要方便太多了。
立即学习“前端免费学习笔记（深入）”；
align-content
与 align-items
有何不同？
这大概是 Flexbox 布局里最容易混淆的两个属性了，我刚开始学的时候也在这里栽过跟头。说白了，它们的区别在于作用的“对象”不一样。
align-content
，就像我们上面说的，它处理的是多行内容在交叉轴上的对齐和空间分配。它只在
flex-wrap: wrap;的多行布局中才有意义。想象一下，你有一堆书，
align-content决定的是这些“书堆”（也就是每一行）在书架上（容器）的整体摆放位置和间距。
而 align-items
呢，它处理的是单行内各个项目在交叉轴上的对齐。也就是说，如果你的容器只有一行项目（或者即使有多行，
align-items也只影响每一行内部的项目），
align-items决定了每个项目在它所属的行内，是顶部对齐、底部对齐、居中还是拉伸。它决定的是书架上每一层（每一行）的每一本书，在这一层里是贴着顶板放，还是贴着底板放，或者居中放。
所以，如果你发现你的项目在垂直方向上没有按照预期对齐，首先要搞清楚你是想调整“行”的整体位置，还是想调整“行内项目”的位置。搞清楚这个，问题往往就迎刃而解了。
什么时候应该使用 align-content
？
在我看来，使用
align-content的场景通常有这么几种：
一种是卡片网格或画廊布局。当你的卡片或图片数量不固定，需要自适应换行，并且你希望这些行在垂直方向上能有某种统一的分布方式时，
align-content就非常有用。比如，你有一个产品列表，每行显示三张卡片，但总共有七张卡片，那么就会有两行满的，一行不满的。如果容器高度足够，你可能希望这三行能均匀分布在容器中，而不是都挤在顶部。这时候，
align-content: space-between;或
align-content: center;就能帮你搞定。
系统介绍：YIXUNCMS中专专版是易迅软件工作室在中秋节来临之即推出的专题模板建站系统，使用增强版后台管控系统，板板设计符合节日特点。易迅软件工作室恭祝全国人民中秋快乐。特别提示：由于网站页面的不同设计，部分后台功能未在前端进行体现。系统特点：1、采用目前流行的PHP语言编写，底层采用超轻量级框架作为系统支撑；2、页面布局使用DIV+CSS技术，遵循WEB标准，及大提高页面的浏览速度；3、使用应
另一种是响应式设计中对垂直空间的精细控制。在不同的屏幕尺寸下，你可能会希望内容行的垂直分布有所不同。例如，在大屏幕上，你希望内容行之间有更多留白，让页面看起来更舒展；而在小屏幕上，为了节省空间，你可能希望行能紧密堆叠。通过媒体查询（Media Queries）配合
align-content，你可以轻松实现这种动态调整。
还有一些需要内容填充可用空间的场景。比如，一个左侧导航栏和右侧内容区的布局，如果右侧内容区的高度是动态的，并且你希望左侧导航项能垂直拉伸以填充整个高度，但又允许换行，那么
align-content: stretch;可能是一个不错的选择。
它主要解决的是“多行整体”的垂直分布问题，而不是单个元素的垂直对齐。一旦你意识到需要调整的是“多行”而不是“单行内元素”，那么
align-content几乎就是你的不二之选了。
align-content
与 gap
属性如何协同工作？
align-content和
gap属性（以前是
grid-gap，现在在 Flexbox 中也得到了支持）的协同工作，在我看来，是现代 CSS 布局中一个挺有意思的组合。它们各自负责不同的“空间”管理，但又互不干涉，共同塑造最终的布局效果。
gap属性，或者更具体地说
row-gap，它直接在行与行之间插入固定的空间。这个空间是“硬性”的，是内容本身的一部分，不属于容器的剩余空间。你可以理解为，
gap属性是先给每行之间加上了一段固定的物理距离。
而
align-content呢，它是在
gap已经生效，并且所有行都占据了各自的物理空间（包括
gap产生的间距）之后，再来处理容器中剩余的额外空间。
举个例子：
.container {
display: flex;
flex-wrap: wrap;
height: 400px; /* 假设容器有固定高度 */
border: 1px solid #ccc;
gap: 20px; /* 行与行之间有20px的间距 */
align-content: center; /* 所有行作为一个整体居中 */
}
.item {
width: 100px;
height: 50px;
background-color: lightblue;
margin: 5px; /* 这里只是为了项目之间有点间距，不影响align-content和gap的理解 */
}在这个例子中：
gap: 20px;
会首先确保每一行之间至少有 20px 的垂直间距。这个间距是固定的，无论容器剩余空间多少，它都会存在。- 然后，所有带有
gap
间距的行作为一个整体，会占据一部分垂直空间。 - 如果容器 (
.container
) 的height: 400px;
还有剩余空间，那么align-content: center;
就会把这个“行整体”在垂直方向上居中，将剩余空间平均分配到“行整体”的上方和下方。
所以，你可以把
gap看作是“行内间距的基石”，而
align-content则是“在基石之上，如何分配整体剩余空间”的策略。它们配合使用，能让你对多行布局的垂直空间控制达到一个非常精细的程度。我个人觉得，先用
gap定义好基础间距，再用
align-content调整整体分布，这是一个非常清晰且高效的工作流程。
