align-content用于控制CSS Grid中多行在交叉轴的垂直分布，当容器高度大于行总高时生效；其常用值包括start、end、center、space-between、space-around、space-evenly和stretch，需配合固定高度或多行布局使用，与align-items、justify-content等属性功能区分明确。
在 CSS Grid 布局中，align-content 并不是用来控制单个网格项的对齐方式，而是控制网格容器中所有行（grid tracks）在交叉轴（通常是垂直方向）上的整体对齐方式。也就是说，当网格容器的高度大于所有网格行高度之和时，align-content 决定这些行如何在容器内垂直分布。
align-content 的作用前提
要让 align-content 生效，必须满足以下条件：
网格容器设置了明确的高度（比如 height: 500px），且该高度大于所有行内容所需的空间； 或者使用了 fr 单位、minmax() 等方式定义行高，导致存在多余空间； 网格有多个行（多行布局），否则没有“分布”的意义。
常用的 align-content 取值及效果
以下是常见的取值及其表现：
start：所有行贴靠容器顶部对齐（默认行为）； end：所有行贴靠容器底部对齐； center：所有行整体居中对齐，上下留白相等； space-between：行与行之间等距分布，首行在顶部，末行在底部； space-around：每行上下分配相等间距，视觉上间隔均匀； space-evenly：包括边缘在内的所有间隙都相等； stretch：如果行高允许（如使用 auto 或 minmax(0,1fr)），则自动拉伸行以填满容器。
实际示例说明
假设你有一个 grid 容器，设置了固定高度，并定义了三行内容：
Revid AI
AI短视频生成平台
96 查看详情
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
height: 600px;
grid-template-rows: 100px 100px 100px;
align-content: center;
}
此时总行高为 300px，容器高 600px，剩余 300px 垂直空间。
由于 align-content: center，这三行会作为一个整体在容器中垂直居中显示，上下各留 150px 空白。
注意区分相关属性
不要混淆以下几个对齐属性：
align-content：控制多行在交叉轴的整体对齐； align-items：控制每个网格项在其单元格内的垂直对齐； justify-content：控制网格整体在主轴（水平方向）的对齐； place-content：可同时设置 align-content 和 justify-content 的简写属性。
基本上就这些。只要理解了网格有多余空间并且是“多行”场景下，align-content 就能有效控制它们的垂直排布方式。不复杂但容易忽略细节。
以上就是css align-content控制整个网格垂直对齐的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1042285.html
微信扫一扫 
支付宝扫一扫 
