align-content仅在flex-wrap: wrap且交叉轴有剩余空间时生效，控制多行的行间分布而非单个子项对齐；常见取值包括stretch（默认，拉满容器）、flex-start（贴起点）、center（整体居中）、space-between（首尾贴边、中间均匀）和space-around（每行周围等距）。
flex 容器换行后 align-content 才生效
很多人发现给 flex 容器设了 align-items: center，但多行时子项上下对不齐——因为 align-items 控制的是**单行内**的交叉轴对齐，而多行布局的行间分布，得靠 align-content。它只在 flex-wrap: wrap（或 wrap-reverse）且容器在交叉轴上有**剩余空间**时才起作用。
align-content 常见取值与实际效果差异
这个属性控制的是“行”作为一个整体，在交叉轴上的分布方式，不是控制单个子项。容易误以为它和 justify-content 是对称逻辑，其实行为更微妙：
-
align-content: stretch（默认）：各行高度被拉满，填满容器交叉轴；若子项高度不一致，视觉上会显得错位 -
align-content: flex-start：所有行贴在交叉轴起点（比如顶部），下方留空 -
align-content: center：所有行整体居中，上下留等量空白 -
align-content: space-between：首尾行贴边，中间行均匀分布 -
align-content: space-around：每行周围分配相等间距（注意：行首/尾外侧也有半份间距）
为什么设了 align-content 还没反应？检查这三点
这是最常卡住的地方，根本原因往往是「条件未满足」：
- 容器没设
flex-wrap: wrap—— 单行布局下align-content完全无效 - 容器在交叉轴方向没有明确高度（比如
height或min-height），或子项总高度刚好撑满容器，导致无剩余空间可分配 - 父容器或祖先元素有
overflow: hidden且高度受限，把多余空白裁掉了，看起来像没生效
调试建议：临时加 outline: 1px solid red 到 flex 容器，确认其真实高度和是否有空白区域。
立即学习“前端免费学习笔记（深入）”；
配合 align-items 使用的典型组合
多行 flex 布局需要两个属性协同：align-content 管“行怎么摆”，align-items 管“每行里 item 怎么对”。例如实现「每行居中、行间均匀分布」：
.container {
display: flex;
flex-wrap: wrap;
align-content: space-between; /* 行间分布 */
align-items: center; /* 每行内 item 垂直居中 */
height: 400px; /* 必须设高度，否则 align-content 无效 */
}注意：如果某一行只有一个子项，align-items: center 会让它在该行内垂直居中；但如果该行被 align-content: stretch 拉高了，它仍会占据整行高度——这时要改用 align-items: flex-start 避免意外拉伸。
真正容易被忽略的是：当子项高度差异大（比如混用图片和文字），align-content: stretch 会让所有行统一按最高子项拉伸，可能破坏视觉节奏。这种场景下，优先考虑 align-content: flex-start + 显式设置子项 align-self 更可控。
