align-content 在单行 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，就能单独沉到底部，不影响其他项。
两者共存时各管一层，但容易误判生效层级
当 Flex 容器多行换行，align-items 和 align-content 可以同时使用，互不干扰：
– align-items 决定“这一行里每个卡片怎么摆”
– align-content 决定“这些行整体怎么堆”
例如：align-items: flex-start + align-content: space-between → 每行内所有子项顶部对齐，同时各行上下均匀分布
混淆常发生在：看到多行布局就直觉认为 align-content 应该主导整体居中，却忽略了 align-items 正在把每行内部的子项往顶部拉；结果是“行组居中了”，但每行里的内容又贴着该行顶部，视觉上依然偏上。
最容易被忽略的其实是容器交叉轴尺寸是否可测量
无论用 align-items 还是 align-content，它们都依赖容器在交叉轴方向有明确尺寸：
– align-items 需要父容器有可测量的交叉轴范围（如 height、min-height，或被父级约束）
– align-content 更苛刻：不仅要有尺寸，还得有“富余空间”，即容器尺寸 > 所有行高度之和
如果只写 height: auto，哪怕子项很多、视觉上明显有多行，align-content 也完全不触发；而 align-items 虽然能生效，但若容器高度等于子项最大高度，center 就看不出效果——因为没空间可居中。
调试建议：在 Chrome DevTools 的 Elements 面板中，勾选 Flexbox overlay（小网格图标），看交叉轴方向是否有“空隙条”；没有，就说明尺寸条件不满足。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
