align-items 控制每行子项在交叉轴的对齐，单多行均生效；align-content 仅在 flex 多行且交叉轴有富余空间时生效，grid 中则取决于轨道数量而非子项是否换行。
align-items 和 align-content 看起来都管“垂直居中”，但它们根本不在同一层干活：前者对齐子项，后者对齐行（Flex）或轨道（Grid）。写错一个，就白调半天。
align-items 在 Flex 中怎么用才生效
它控制的是“每一行内部”的子项在交叉轴上的对齐，单行、多行都起作用，不挑条件。
-
align-items: center让每行内的子项各自在其所在行的高度范围内垂直居中（不是整个容器） - 如果某子项自己设了
height: 60px，align-items: stretch（默认）就不会拉伸它——这是规则被显式覆盖，不是失效 -
flex-direction: column时，主轴变垂直，交叉轴变水平，此时align-items控制的是左右对齐，不是上下 - 个别子项可用
align-self: flex-end覆盖父级align-items，其他项不受影响
align-content 在 Flex 中为什么经常没反应
它只在三个条件**同时满足**时才参与布局：容器是 display: flex + flex-wrap: wrap（或 wrap-reverse），子项**实际换行**，且容器在交叉轴方向有**明确富余空间**。
- 写了
align-content: center却没效果？先检查容器有没有设height或min-height；如果高度刚好被内容撑满，剩余空间为 0，该声明会被浏览器静默忽略 - 只有一行子项时，
align-content完全不生效——哪怕你写了flex-wrap: wrap，也没用 -
align-content: space-between是首尾两行贴容器边缘，中间等距；space-around是每行上下留等量空隙；stretch（默认）会让每行拉伸填满交叉轴，注意这和align-items: stretch拉伸的是子项高度不同
Grid 布局里 align-content 和 align-items 的逻辑完全不同
Grid 没有“换行”概念，它的行数由 grid-template-rows 或隐式轨道生成决定。因此 align-content 的触发条件和 Flex 完全不一样。
-
align-content只响应“轨道数量”，不响应子项数量或是否溢出。只有一条网格横线（即只有一行轨道），它就不起作用 - 想让单行内容垂直居中，必须用
align-items: center，且容器得有可测量高度（如height: 300px），子项不能是height: 0或visibility: hidden -
align-content的 “content” 指的是网格轨道组成的“行组”，不是子项内容本身——子项里的文字、图片错位，得靠line-height、vertical-align或align-self调
最容易被忽略的点是：两者共存时互不干扰，但各自依赖的前提条件必须独立满足。比如 Flex 多行容器里同时设 align-items: baseline 和 align-content: space-around，前者负责图文混排时每行内基线对齐，后者负责各行之间的空隙分配——缺任何一个前提，对应的效果就消失，而且浏览器不会报错、不给提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
