align-content 管理多行 flex 容器中各行在交叉轴上的间距分配，仅在 flex-wrap: wrap 且交叉轴有剩余空间时生效；它不控制单个项目，而是调节行与行之间的空隙分布。
align-content 在多行 flex 容器里到底管什么
align-content 只对「多行」的 flex 容器生效，且前提是 flex-wrap: wrap（或 wrap-reverse）+ 主轴方向有剩余空间。单行容器、flex-wrap: nowrap 时它完全不干活，设了也白设。
它的作用不是对齐单个项目，而是分配「行与行之间」在交叉轴上的多余空间。比如三行内容，容器高度比三行加起来高，align-content 就决定这多出来的空隙怎么分——是挤在顶部、居中、还是均匀拉开。
- 常见错误现象：
align-content: center写了但没反应 → 先检查是不是单行，再看flex-wrap是否为wrap - 使用场景：卡片网格、响应式表单组、多行标签云等需要控制「行间距分布」的布局
- 和
align-items别混：后者对齐的是每行内部的项目，前者对齐的是「行」这个整体
align-content 的取值差异和视觉效果区别
六个合法值：flex-start、flex-end、center、space-between、space-around、space-evenly。关键区别在「行与行之间的空隙是否包含首尾外边距」。
-
space-between：第一行顶着上边，最后一行顶着下边，中间空隙均分 -
space-around：每行上下各占一半间距 → 首尾行到容器边缘的距离 = 行间距离的一半 -
space-evenly：所有相邻边缘（含容器上下边）间距完全相等 → 最直观的「均匀分布」 - 注意：
stretch是默认值，但仅当行内项目没设交叉轴尺寸时才拉伸；一旦某行里有align-self: flex-start，那行就不再被拉伸
和 grid 的 align-content 混用时的兼容性陷阱
CSS Grid 也有 align-content，行为类似但触发条件不同：Grid 不需要「多行」概念，只要轨道定义后存在未被填满的网格区域，它就起作用。而 Flex 下必须真有换行（flex-wrap 生效且内容溢出）。
立即学习“前端免费学习笔记（深入）”；
- 容易踩的坑：把 Grid 布局写成 Flex 语义（比如用
display: flex; flex-wrap: wrap模拟网格），结果发现align-content不如预期 → 实际该用 Grid +grid-template-columns - 性能影响：Flex 多行 +
align-content会触发额外的行布局计算，尤其在动态增删子项时，比单行 Flex 或 Grid 略重 - 浏览器支持无问题，但 Safari 旧版本（≤14.1）对
space-evenly支持不稳定，可降级为space-around加微调
调试 align-content 无效的三步检查法
别急着改值，先确认基础条件是否满足：
- 检查父容器：
display: flex+flex-wrap: wrap（或wrap-reverse）是否同时存在 - 检查交叉轴是否有剩余空间：比如
flex-direction: row时，容器height必须大于所有行的总高度；用outline或开发者工具的盒模型高亮看实际占用 - 检查子项是否「撑满」了行：如果某行只有一个子项且它设置了
align-self: stretch，又没限制高度，可能把整行拉高，导致没剩余空间 → 此时align-content无处发力
复杂点在于：它依赖布局结果而非声明本身。哪怕代码全对，内容长度、字体渲染、甚至 subpixel 计算都可能导致「本该换行却没换」，最终让 align-content 彻底静音。
