align-content 在单行 Flex 容器中完全不生效；它仅在 flex-wrap: wrap 且多行、交叉轴有富余空间时作用，而 align-items 始终控制每行内部子项在交叉轴的对齐。
align-content 在单行 Flex 容器中完全不生效
这是最常被忽略的前提：只要容器里只有一行子项，align-content 的任何值（包括 center、space-between）都不会产生视觉变化，浏览器也不会报错或警告。
它只在同时满足以下三个条件时才起作用：
-
display: flex且flex-wrap: wrap（或wrap-reverse） - 子项实际换行，形成多行（不是靠
min-width硬撑出来的“假多行”） - 容器在交叉轴方向上有富余空间（比如
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-content: center 不够，因为每行内部的卡片可能高度不一；只靠 align-items: center 也不行，因为两行仍会堆在顶部。
典型组合写法：
container {
display: flex;
flex-wrap: wrap;
height: 400px; /* 必须有明确交叉轴尺寸 */
align-items: center; /* 每行内卡片垂直居中 */
align-content: center; /* 两行整体在 400px 高度里居中 */
}
如果想让多行之间留空，用 align-content: space-between 或 space-around；此时 align-items 依然负责每行内部的对齐逻辑，二者互不干扰。
flex-direction 改变后，交叉轴方向跟着变，别硬套“垂直/水平”说法
很多人记成“align-items 控制垂直对齐”，这是错觉。它永远作用于交叉轴（cross axis），而交叉轴由 flex-direction 决定：
-
flex-direction: row→ 主轴水平，交叉轴垂直 →align-items控制上下对齐 -
flex-direction: column→ 主轴垂直，交叉轴水平 →align-items控制左右对齐
所以写 align-items: center 在 column 布局里，效果是让所有子项水平居中——这点在做侧边栏菜单或垂直时间轴时特别容易踩坑。
真正难的不是记住属性名，而是每次写之前先问自己：当前容器有没有换行？交叉轴有没有剩余空间？我是在调“行内”还是“行间”？漏掉任一条件，align-content 就等于没写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
