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，再观察行块整体浮动位置。
立即学习“前端免费学习笔记（深入）”；
