在CSS网格布局中，align-content 用于控制多行网格轨道（grid tracks）在容器的交叉轴（cross axis）上的对齐方式。当网格容器有多余空间，并且网格行的总高度小于容器高度时，align-content 就会起作用。
适用场景：多行网格布局
align-content 只在以下情况生效：
网格容器中有多行（即多个 grid-row）所有行的高度总和小于网格容器的高度使用了 grid-auto-rows 或显式定义了行高
如果只有一行，或行高占满容器，则 align-content 不会产生效果。
常用属性值说明
align-content 支持多个对齐值：
立即学习“前端免费学习笔记（深入）”；
start：行向容器顶部对齐（默认行为）end：行向容器底部对齐center：行整体居中排列space-between：行之间等距分布，首尾行贴边space-around：每行周围分配相等空间space-evenly：所有行之间的间隔完全相等stretch：行拉伸以填满容器（前提是行高未固定）
实际代码示例
下面是一个使用 align-content: center 的例子：
九歌
九歌–人工智能诗歌写作系统
322 查看详情
.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 80px; /* 每行高80px */ gap: 10px; height: 400px; /* 容器高度大于内容总高度 */ align-content: center; /* 多出行在垂直方向居中 */}.item {background: lightblue;}
在这个例子中，假设有4行内容，总高度为 4×80 + 3×10 = 350px，而容器是400px，多出的50px空间会被 align-content: center 均匀分配到上下两侧。
与 align-items 的区别
align-items 控制的是单个网格项在其单元格内的对齐方式，而 align-content 控制的是整行网格轨道之间的对齐和分布。
如果行高是固定的，align-content 决定这些行如何分布在容器中；如果行高可拉伸（如使用 minmax()），stretch 值会让行自动扩展。
基本上就这些。只要记住：多行 + 有剩余空间 + 设置对齐方式，就能用上 align-content。不复杂但容易忽略。
以上就是css align-content在多行网格中如何使用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1041159.html
微信扫一扫 
支付宝扫一扫 
