align-items始终生效，控制每行内子项在交叉轴的对齐；align-content仅当flex-wrap换行、多行且交叉轴有剩余空间时生效，控制各行整体在交叉轴的分布。
align-items 始终生效，管“每行里每个子项怎么对齐”；align-content 只在多行且交叉轴有剩余空间时才起作用，管“所有行作为一个整体怎么分布”。
align-items 为什么单行多行都有效
它作用于每一行的交叉轴方向，决定该行内所有子项的对齐方式，和是否换行无关。
-
align-items: center让每行内的子项在该行自身高度范围内垂直居中（不是整个容器） -
align-items: stretch（默认）会拉伸子项填满整行交叉轴尺寸，但前提是子项没设height或width——比如某子项写了height: 60px，它就不会被拉伸 - 当
flex-direction: column时，主轴变垂直，交叉轴变水平，此时align-items控制的是左右对齐，不是上下 - 可被单个子项的
align-self覆盖，例如align-self: flex-end能让某个卡片单独沉到底部
align-content 为什么经常写了却没反应
它只在同时满足四个条件时才起效：display: flex + flex-wrap: wrap + 实际换行 + 交叉轴方向有富余空间。
- 只有一行时写
align-content: center，浏览器直接忽略，控制台不报 warning，容易误以为 CSS 没加载 - 容器没设明确高度（如仅靠内容撑开），或高度刚好被所有行占满，
align-content就无效——因为没有“剩余空间”可分配 -
align-content: space-between是首尾两行贴容器边缘，中间行等距；space-around是每行上下留等量空隙，不是“项目之间”留空 -
align-content: stretch（默认）会拉伸“行高”，让所有行共同填满容器交叉轴，和align-items: stretch拉伸“子项高度”完全不同
两者共存时谁管什么
多行 Flex 容器中，它们互不干扰，各司其职：
-
align-items决定“这一行里每个卡片怎么摆”——比如align-items: flex-start让每行内所有子项顶部对齐 -
align-content决定“这些行整体怎么堆”——比如align-content: space-between让第一行顶着容器上边、最后一行顶着下边、中间行均匀分布 - 想让图文混排更自然，用
align-items: baseline；align-content对它完全无影响
最容易被忽略的其实是：align-content 不是“让内容居中”的万能开关，它只在你明确制造了多行 + 留出空白空间的前提下才开始工作。很多所谓“居中失效”，本质是忘了给容器加 height 或 min-height，或者子项根本没换行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
