align-content在单行Flex容器中完全无效，因它仅当display: flex、flex-wrap: wrap且交叉轴有富余空间时才生效；单行应使用align-items控制子项对齐。
align-content 在单行 Flex 容器里根本不起作用
写了 align-content: center 却没反应？八成是因为容器只有一行。它只在同时满足三个条件时才参与布局：
- display: flex 且 flex-wrap: wrap（或 wrap-reverse）
- 子项**实际换行**（不是靠 min-width 勉强撑出来的“视觉多行”）
- 容器在交叉轴方向有**明确富余空间**（比如 height: 400px，但所有行加起来只占 220px）
常见错误现象：align-content: center 写了但子项还是贴顶——大概率是容器没设高度，或者高度刚好被内容撑满，导致“剩余空间 = 0”。浏览器不会报错，也不会警告，只是默默忽略该声明。
align-items 控制的是“每行内部”的对齐
align-items 不挑行数，单行、多行都生效。它决定的是“这一行里的所有子项”，在该行自身的交叉轴范围内怎么摆。
例如 flex-direction: row 时：
- align-items: center → 每行内的子项各自垂直居中（注意：是相对于该行高度居中，不是整个容器）
- align-items: stretch（默认）→ 子项拉伸填满整行交叉轴尺寸，但前提是没设固定 height
- align-items: baseline → 文字类内容按基线对齐，图文混排时比 center 更自然
它会被子项自己的 align-self 覆盖。比如某张卡片加了 align-self: flex-end，就能单独沉到底部，不影响其他项。
Grid 布局里 align-content 和 align-items 的规则完全不同
在 Grid 中：align-content **不看子项数量，只看网格轨道行数**。它只在以下两个条件同时成立时起效：
- 容器有明确的交叉轴尺寸（如 height: 300px），且 > 所有行轨道高度之和
- 实际存在**至少两行网格轨道**（由 grid-template-rows 显式定义，或子项触发隐式行生成）
而 align-items 才是 Grid 中单行内容垂直居中的主力。但它也有硬前提：容器必须有可测量高度（height 或 min-height），且子项不能是 height: 0 或 visibility: hidden 等无渲染尺寸的状态。
特别注意：align-content 的 “content” 指的是网格轨道组成的“行组”，不是子项内容本身——子项内部的文字、图片错位，得靠 line-height、vertical-align 或 align-self 去调。
两者共存时，各管一层，互不干扰
当 Flex 容器多行换行，align-items 和 align-content 可以同时使用：
- align-items 决定“这一行里每个卡片怎么摆”
- align-content 决定“这些行整体怎么堆”
例如：align-items: flex-start + align-content: space-between → 每行内所有子项顶部对齐，同时各行上下均匀分布。
最容易被忽略的其实是层级关系：align-content 操作对象是“行”，align-items 操作对象是“子项”，它们从来不在同一个平面上打架——但如果你没意识到这个前提，就很容易反复调试却得不到预期效果。
