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 个）：
