align-content在单行flex容器中完全不生效，因其设计目标是分配多行间的交叉轴剩余空间，单行无“行间”概念；必须同时满足flex-wrap: wrap、实际换行且交叉轴有剩余空间才生效。
align-content 在单行 Flex 容器中完全不生效
这是最常被忽略的前提：只要容器里只有一行子项，align-content 的任何值（包括 center、space-between）都不会产生视觉变化，浏览器也不会报错或警告。它只在同时满足以下三个条件时才起作用：display: flex 且 flex-wrap: wrap（或 wrap-reverse）、子项实际换行形成多行、容器在交叉轴方向上有富余空间（比如 flex-direction: row 时设置了 height 或 min-height，且总高度 > 所有行加起来的高度）。
常见错误现象：align-content: center 写了但子项还是贴顶——大概率是只有一行，或者容器没设高度、高度刚好被内容撑满。
align-items 始终控制“每行内部”的对齐
align-items 不挑行数，单行、多行都管。它决定的是“这一行里的所有子项”，在该行的交叉轴范围内怎么摆。
-
flex-direction: row时：align-items: center→ 每行内的子项各自垂直居中（注意：是相对于该行自身高度居中，不是整个容器） -
align-items: stretch（默认）→ 子项拉伸填满整行高度（前提是没设height） -
align-items: baseline→ 文字类内容按基线对齐，比center更自然 - 它会被子项自己的
align-self覆盖，比如某张卡片加了align-self: flex-end，就能单独沉到底部
两者共存时各自负责不同层级
当容器多行换行，align-items 和 align-content 可以同时使用，互不干扰：前者决定“这一行里每个卡片怎么摆”，后者决定“这些行整体怎么堆”。
例如：align-items: flex-start + align-content: space-between → 每行内所有子项顶部对齐，同时各行上下均匀分布。
想让一个两行的卡片列表在容器中真正“整体居中”，只靠 align-content: center 不够，因为每行内部的卡片可能高度不一；只靠 align-items: center 也不行，因为两行仍会堆在顶部。典型组合写法：
container {
display: flex;
flex-wrap: wrap;
height: 400px; /* 必须有明确交叉轴尺寸 */
align-items: center; /* 每行内卡片垂直居中 */
align-content: center; /* 两行整体在 400px 高度里居中 */
}
调试时发现 align-content 不生效，90% 是卡在这三个地方
忘了加 flex-wrap: wrap —— 即使内容溢出，不显式声明也不会自动换行；
容器没设明确高度（如仅靠内容撑开），align-content 也无效——因为没有“剩余空间”可分配；
子项未真正换行（比如用 min-width 硬撑出“假多行”，但实际渲染仍为一行）。
最容易被忽略的其实是：你得先确认自己面对的是单行还是多行布局，再决定该调哪个属性——而不是凭感觉乱试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
