align-content 用于多行 flex 布局中控制各行整体在交叉轴上的对齐方式，仅当 flex-wrap 为 wrap/wrap-reverse 且实际换行、容器有明确高度时生效；它不作用于单个子项，与 align-items 职责分明。
align-content 在 flex 多行布局中到底起什么作用
align-content 只在 flex 容器设为 flex-wrap: wrap 或 wrap-reverse，且子项实际换行（即存在多行）时才生效。它控制的是“行与行之间的对齐”，不是单个子项的对齐——这点常被误认为是 align-items 的加强版，其实二者完全不重叠。
哪些值能用，各自效果怎么分辨
常见取值及实际表现：
-
stretch（默认）：各行高度拉满容器剩余空间，等分空白区域 -
flex-start：所有行贴顶部排列，下方留空 -
flex-end：所有行贴底部，上方留空 -
center：各行整体居中，上下空白均分 -
space-between：首行顶、末行底，中间行等距分布 -
space-around：每行上下各占一份间隙，视觉上更松散 -
space-evenly：所有行（含首尾）之间、以及首尾与容器边缘间距完全相等
为什么设置了 align-content 却没反应
这是最常踩的坑，原因通常有以下几种：
- 容器没设
flex-wrap: wrap，或子项根本没换行（宽度够、没触发折行） - 容器高度未显式设定（如
height: auto），导致没有“剩余空间”可分配 - 用了
align-items混淆了概念，误以为它能控制行间位置 - 父容器或自身有
min-height/max-height限制，挤压了可用空间
验证是否生效，可在容器加 border: 1px solid red 和固定 height，再观察行块整体浮动位置。
立即学习“前端免费学习笔记（深入）”；
和 align-items、justify-content 的协作关系
三者职责分明，互不干扰：
-
justify-content：控制主轴（flex-direction方向）上“单行内”子项的对齐 -
align-items：控制交叉轴上“每一行内”子项的对齐（每行独立生效） -
align-content：控制交叉轴上“所有行作为一个整体”的对齐（只在多行时起作用）
比如 flex-direction: row; flex-wrap: wrap; 时，主轴是水平，交叉轴是垂直 —— 此时 align-content 才管垂直方向的行间分布。如果改成 column + wrap，主轴变垂直，align-content 就转而控制水平方向的列间分布。
多行 flex 布局里，align-content 是唯一能真正“调度行块整体位置”的属性，但它的生效条件比想象中苛刻得多，稍不留神就被容器高度或换行逻辑悄悄绕过。