align-content 控制多行 flex 容器中各行之间的对齐，仅在 flex-wrap: wrap 且容器有剩余高度时生效；它不影响单行或子项对齐，常见失效原因是缺少高度约束或未换行。
align-content 在多行 flex 容器中到底管什么
align-content 只在 flex 容器设为 flex-wrap: wrap（或 wrap-reverse）且存在**多行子项**时才生效。它控制的是“行与行之间的对齐”，不是单个子项的对齐——后者归 align-items 管。
常见误解是以为设了 align-content: center 就能让所有子项垂直居中，结果没反应：大概率因为只有一行，或者忘了加 flex-wrap。
- 必须同时满足两个条件：容器有明确高度（或受限于父容器），且子项换行后总高度小于容器高度，留出“行间空白”
-
align-content对单行 flex 容器完全无效，此时改用align-items - 值为
stretch（默认）时，各行会等比例拉伸填满剩余空间；space-between则首尾行贴上下边缘，中间均匀分隔
为什么设置了 align-content 却没看到行间距变化
最常踩的坑是容器高度没约束，导致 flex 容器自动“收缩包裹”内容，没有多余空间供 align-content 分配。
比如父容器是 min-height: 100vh，但子 flex 容器没设 height 或 min-height，它就会按所有子项总高撑开，align-content 失去作用对象。
- 检查容器是否真有“剩余空间”：用浏览器开发者工具看 computed height 和 content height 是否不同
- 确保
display: flex+flex-wrap: wrap+ 明确高度（如height: 400px或min-height: 300px）三者齐全 - 避免和
align-items: stretch混用造成视觉干扰——后者会让每行内子项拉伸，可能掩盖行间距效果
align-content 各值的实际表现差异
不同取值对行布局的影响很直观，但容易忽略兼容性和语义细节：
-
flex-start：所有行堆在容器顶部，等价于不设该属性（因默认是stretch，但无剩余空间时表现类似） -
center：所有行整体居中，行与行之间保持原始高度，只调整整体偏移 -
space-around：每行上下分配相等间距，首行顶边、末行底边的间距只有行间的一半 -
space-evenly：所有间距（包括首行顶、末行底、行间）完全相等 —— 注意 Safari 旧版本不支持
示例：
.container {
display: flex;
flex-wrap: wrap;
height: 300px;
align-content: space-between;
}
和 grid 的 place-content 混用时要注意什么
如果同一个元素既写了 display: flex 又写了 place-content，后者会被忽略——place-content 是 grid 布局属性，在 flex 中无意义。
反过来，如果误把 flex 容器当 grid 用（比如只改 display 没同步调参数），align-content 依然有效，但 justify-content 行为会变：flex 里它对齐主轴上的行（即整行组），grid 里才对齐单元格。
- 别在 flex 容器上写
place-content、place-items，纯属无效 - 需要更精细控制每行内子项对齐？用
align-items配合align-self，而不是指望align-content - 多行+等高+等距需求强烈，且兼容性允许，直接切 grid 更稳：用
display: grid+grid-template-rows: repeat(auto-fit, minmax(60px, 1fr))+row-gap
真正卡住的地方往往不是语法写错，而是没意识到 align-content 的生效前提太具体：它不处理“有没有空”，只处理“怎么分空”。空从哪来，得自己给。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
