align-items设了却看不出垂直居中效果，是因为它只作用于子项所在“行内”的交叉轴对齐；需满足容器有明确交叉轴尺寸、flex-direction为row且子项未用align-self覆盖才显效。
align-items 为什么设了却看不出垂直居中效果
它确实生效了，但只作用于每个子项在其所在“行内”的交叉轴对齐。常见错觉是：容器高度很大、子项只有一行，align-items: center 却没让内容视觉居中——其实是因为该行本身紧贴容器顶部，而子项只是在那行内部居中了。
必须满足三个条件才能看到明显效果：
- 容器设置了明确的交叉轴尺寸（如
height: 400px或min-height） -
flex-direction是row（此时交叉轴为垂直方向） - 子项没有设置
align-self覆盖父级align-items
示例：.container { display: flex; height: 300px; align-items: center; } 中，如果子项总高只有 60px，它们会在这 60px 高的“行”里垂直居中，但整行仍默认从顶部开始——所以视觉上还是偏上。
align-content 在 Flex 中什么时候完全不干活
它只在多行且有剩余空间时才参与布局计算。只要以下任一条件不满足，align-content 就被浏览器忽略：
-
flex-wrap: wrap或wrap-reverse没开 - 实际渲染出来只有一行（哪怕写了 20 个子项，但容器够宽全挤进一行）
- 容器交叉轴尺寸未设定，或设为
height: auto（此时无“剩余空间”可分配）
典型错误写法：align-content: center + height: auto → 无效。打开 DevTools 的 Layout 面板，看是否真有多条横线（代表多行），没有就别调这个属性。
Grid 中的 align-content 和 Flex 中的行为一致吗
不一致。Flex 的 align-content 响应的是“内容是否实际换行”，而 Grid 的 align-content 只响应“显式或隐式定义了多少行轨道”。
例如：grid-template-rows: 100px 只定义了一行轨道，哪怕塞进 100 个子项全部溢出，align-content 依然无效；必须写成 grid-template-rows: repeat(3, 100px) 或留空靠 grid-auto-rows 触发多行生成。
Grid 中真正管单行内容垂直居中的，始终是 align-items，不是 align-content。
两个属性同时设置时谁“赢”
它们根本不竞争。一个管“行内”，一个管“行间”：
-
align-items决定每行里的每个子项怎么摆（比如都顶着该行顶部） -
align-content决定所有行作为一个整体，在容器交叉轴上怎么分布（比如三行上下贴边、中间均分空白）
最容易被忽略的是：当容器高度远大于子项总高度时，align-content 分配的是“行与行之间的空隙”，而 align-items 仍在每一行内部各自起效——这两个动作是正交的，互不影响。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
