align-items 控制每行内子项在交叉轴的对齐，align-content 控制多行整体在交叉轴的分布；前者始终生效，后者仅在 flex-wrap 且有换行及剩余空间时生效。
align-items 管“每一行里的项目怎么排”
align-items 决定的是：**每行内部的子元素**在交叉轴（通常是垂直方向）上如何对齐。它始终生效，哪怕只有一行、甚至没设 flex-wrap。
常见错误是以为它能控制多行整体位置——其实不能。比如容器高 400px，三行卡片总高度才 150px，align-items: center 只会让每行内的卡片各自垂直居中，三行仍会挤在顶部（因为每行默认从上往下堆）。
-
stretch（默认）：子项拉伸填满整行高度（前提是没设固定 height） -
center：每行内所有子项在该行高度范围内垂直居中 -
baseline：适合图文混排，按文字基线对齐，比center更自然
align-content 管“多行之间怎么分布”
align-content 只在两个条件同时满足时才起作用：① 容器设了 flex-wrap: wrap（或 wrap-reverse）；② 实际换行了，且交叉轴有剩余空间。 它不碰单个子项，而是把“每一行”当一个整体来分配位置。
典型误用：给单行 flex 容器加 align-content: center，结果毫无反应——浏览器直接忽略，连 warning 都不报。
立即学习“前端免费学习笔记（深入）”；
-
space-between：首尾两行贴上下边缘，中间行等距分布（常用于卡片网格留白） -
stretch（默认）：各行拉伸填满容器高度（注意：这和align-items: stretch不同，后者拉伸的是子项，前者拉伸的是“行”） -
center：所有行作为一个整体，在容器交叉轴方向居中（三行会并排居中，不是每行自己居中）
两者共存时谁管哪块？看这个例子就清楚
假设一个 display: flex; flex-direction: row; flex-wrap: wrap; height: 600px; 的容器，里面 8 个 height: 80px 的卡片，每行最多放 3 个 → 共 3 行（第 3 行只有 2 个）：
container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: 600px;
align-items: center; /* 每行内卡片垂直居中 */
align-content: space-between; /* 3 行在 600px 高度里均匀分布 */
}效果是：每行内的卡片上下居中对齐；同时，第 1 行顶着顶部，第 3 行顶着底部，第 2 行在中间——这才是真正可控的“整体垂直留白”。
如果删掉 flex-wrap: wrap，align-content 立刻失效，只剩 align-items 控制单行对齐。
为什么改了没反应？先查这三个点
调试时发现 align-content 不生效，90% 是卡在这三个地方：
- 忘了加
flex-wrap: wrap—— 即使内容溢出，不显式声明也不会自动换行 - 容器交叉轴尺寸被设死（如
height: fit-content或没设高度），导致没有“剩余空间”可分配 - 子项用了
align-self: flex-start等覆盖了align-items，但误以为也影响align-content（它完全不响应align-self）
记住：flex 布局里，“行”是隐式生成的抽象单位，align-content 操作的就是这个抽象层——看不见，但必须存在，且得有空间才能动。
