align-content用于控制多行Flexbox或Grid布局在交叉轴上的对齐方式，仅在存在多余空间且有多行时生效。其常用值包括flex-start、flex-end、center、space-between、space-around、space-evenly和stretch，分别实现不同对齐效果。在Flexbox中需配合flex-wrap使用，在Grid中则应用于多行轨道且容器高度大于内容高度时，能有效提升多行布局的美观性与规整度。
在使用 CSS Flexbox 或 Grid 布局时，align-content 是一个关键属性，用于控制多行内容在交叉轴（cross axis）上的对齐方式。它只在容器内有多行可伸缩项目（flex lines）或网格行（grid rows）且存在额外空间时才起作用。
align-content 适用的布局类型
该属性主要应用于以下两种布局：
- Flexbox：当容器设置为 flex-wrap: wrap; 并产生多行 flex 项目时
- Grid：当网格容器有多个轨道行，并且总高度小于容器高度时
单行布局中，align-content 不会生效，此时应使用 align-items 控制项目对齐。
align-content 的常用取值及效果
以下是 align-content 支持的主要值及其表现：
立即学习“前端免费学习笔记（深入）”；
- flex-start：所有行堆叠在容器的起始位置
- flex-end：所有行堆叠在容器的末尾位置
- center：行整体居中对齐，上下留白相等
- space-between：行之间均匀分布，首行贴顶部，末行贴底部
- space-around：每行周围分配均等空间，上下边缘也有半间距
- space-evenly：包括边缘在内的所有间隙完全相等
- stretch：默认值，拉伸行以填满剩余空间（注意：flex 项目需允许伸展）
实际应用示例（Flexbox）
假设你有一组卡片，希望在容器中换行排列，并控制行间距：
.container { display: flex; flex-wrap: wrap; height: 400px; align-content: space-between; } .item { width: 100px; height: 80px; }
在这个例子中，如果卡片自动换行为三行，这三行会在 400px 高的容器中垂直分布，行间距相等，第一行顶对齐，最后一行底对齐。
Grid 中的 align-content 使用
在 Grid 布局中，当网格总行高小于容器高度时，可以这样设置：
.grid-container { display: grid; grid-template-rows: repeat(2, 100px); grid-template-columns: repeat(3, 1fr); height: 300px; align-content: center; }
这里定义了两行各 100px，总高 200px，在 300px 容器中，整个网格内容块会垂直居中显示。
基本上就这些。只要记住：align-content 管的是“行怎么排”，而且必须有多行才有意义。用好它能让多行布局更整洁、更有设计感。