align-content用于控制CSS Grid多行在垂直方向的对齐方式，仅在容器有多余空间且含多行时生效；常用值如center使各行居中，space-between实现首尾贴边、中间等距，stretch则拉伸填满容器，需配合固定高度或未占满空间的行轨道使用。
在使用 CSS Grid 布局时，align-content 是一个非常实用的属性，用于控制网格容器中网格行在交叉轴（垂直方向）上的对齐方式。它只在网格容器有多余空间且包含多行网格轨道时才生效。
align-content 的作用场景
当你的 grid 容器设置了固定高度，或者其内容不足以填满容器高度时，如果定义了多个行轨道（比如用 grid-template-rows 或 repeat()），而这些行没有占满整个容器，那么剩余的垂直空间可以通过 align-content 来分配。
这个属性适用于多行或多列网格容器的总体对齐，与 align-items（控制单个网格项在单元格内的对齐）不同。
常用的 align-content 取值及效果
以下是常见的取值及其表现：
立即学习“前端免费学习笔记（深入）”；
start：所有行贴靠容器顶部对齐（默认值，部分情况下表现为 stretch） end：所有行贴靠容器底部对齐 center：所有行在容器中垂直居中对齐 space-between：行之间均匀分布，首行贴顶，末行贴底 space-around：每行上下有相等的空间，两端空间为一半 space-evenly：包括边缘在内的所有间隙都相等 stretch：行自动拉伸以填满容器（前提是未设置固定高度）
实际应用示例
假设你有一个固定高度的 grid 容器，并定义了三行，但总高度小于容器高度：
Reclaim.ai
为优先事项创建完美的时间表
90 查看详情 
.container {
display: grid;
height: 500px;
grid-template-rows: 100px 100px 100px;
align-content: center;
}
此时，这三行总共 300px 高，容器高 500px，多出的 200px 将在上下均匀分布，实现垂直居中对齐。
若将 align-content: space-between，则第一行顶对齐，最后一行底对齐，中间行等距分布。
注意事项
该属性仅在以下情况有效：
容器启用了 grid 布局（display: grid 或 display: inline-grid） 容器在交叉轴方向上有多余空间 存在多行网格轨道（单行无效） 不能与 grid-auto-rows 的某些固定行为冲突（如全部撑满）
基本上就这些。合理使用 align-content 能让 grid 布局在垂直方向更灵活地适应内容和空间变化，是实现整体对齐的重要工具。
以上就是css grid布局自动对齐align-content应用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/997696.html
微信扫一扫 
支付宝扫一扫 
