align-content对单行无效，因其作用对象是多行网格轨道而非单个子项；必须同时满足容器有明确高度且大于行高总和、存在至少两行轨道、交叉轴有剩余空间三个条件才生效。
align-content 为什么对单行无效
因为 align-content 的作用对象是「多行网格轨道」，不是单个网格项。如果容器只有一行（比如 grid-template-rows: auto 且内容没换行），即使设置了 height: 400px，align-content: space-between 也完全没反应——它没东西可“分布”。常见错误是误以为它能控制单个文字块的行内垂直对齐，其实那是 align-items 或 line-height 的事。
必须满足的三个前提条件
让 align-content 生效，三者缺一不可：
- 容器设了明确高度（
height或min-height），且该高度 > 所有行内容总高 - 启用了多行布局：通过
grid-template-rows显式定义多行，或靠grid-auto-rows+ 多个grid-row触发隐式多行 - 行高不能全被撑满：比如用
1fr 1fr 1fr占满容器，就没剩余空间供align-content分配
例如：.container { display: grid; height: 300px; grid-template-rows: 60px 60px; align-content: space-between; } —— 两行共占 120px，剩下 180px 空间才会被用于分配。
space-between 和 space-evenly 的关键区别
两者都产生“等距”，但计算逻辑不同，视觉效果差异明显：
-
space-between：首行贴顶、末行贴底，中间间隙相等；行数越多，中间空隙越小 -
space-evenly：所有间隙（包括顶部到首行、末行到底部）完全相等；更均匀，但顶部/底部留白可能比预期大
比如 3 行 + 容器高 300px + 行高各 40px（总高 120px），剩余 180px：
– space-between → 顶部 0px、行间 90px、底部 0px
– space-evenly → 顶部/行间/底部全是 45px（4 段间隙均分 180px）
文本内容换行后仍不生效？检查 writing-mode
如果你用了 writing-mode: vertical-rl 做竖排文本，align-content 的“交叉轴”就从垂直变成了水平方向。此时它控制的是列之间的水平分布，而非你直觉中的“文字行上下间距”。想调竖排文字的行距，请改用 line-height（它在竖排中实际控制字符列间距）或 row-gap（针对网格项之间）。别把 align-content 和文本流内间距混为一谈。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
