align-items 控制每行内子项在交叉轴的对齐，始终生效；align-content 控制多行整体在交叉轴的分布，仅当 flex-wrap 换行且交叉轴有剩余空间时生效。
align-items 管每行内部的子项怎么对齐，align-content 管多行之间怎么分布——但后者只在换行且交叉轴有剩余空间时才起作用。
align-items 始终生效，哪怕只有一行
它作用于每一行的交叉轴方向，决定该行内所有子项在垂直（flex-direction: row）或水平（flex-direction: column）方向上的对齐方式。无论是否换行、是否设 flex-wrap，它都起效。
-
align-items: center让每行内的子项在该行高度范围内居中，不是让所有行整体居中 -
align-items: stretch（默认）会拉伸子项填满整行交叉轴尺寸，但前提是子项没设固定height或width - 如果某子项设置了
height: 60px，而父容器align-items: stretch，它就不会被拉伸——这不是属性失效，是规则被显式覆盖 - 在
flex-direction: column下，主轴变垂直，交叉轴变水平，此时align-items控制的是左右对齐，不是上下
align-content 只在多行且有剩余空间时才管用
它不碰单个子项，而是把“每一行”当作一个整体来排布。必须同时满足三个条件：display: flex + flex-wrap: wrap + 实际换行了 + 交叉轴方向有富余空间（比如容器设了 height: 400px，但所有行加起来只占 180px）。
-
align-content: center是让所有行作为一个组，在容器交叉轴上居中，三行就并排居中，不是每行自己居中 -
align-content: space-between首尾两行贴容器上下边缘，中间行等距分布；space-around则是每行上下留等量空隙 - 只有一行时写
align-content: center，浏览器直接忽略，控制台连 warning 都不报，容易误以为 CSS 没加载 - 容器没设明确高度（如仅靠内容撑开），
align-content也无效——因为没有“剩余空间”可分配
两者共存时，各自负责不同层级
当容器多行换行，align-items 和 align-content 可以同时使用，互不干扰：前者决定“这一行里每个卡片怎么摆”，后者决定“这些行整体怎么堆”。
立即学习“前端免费学习笔记（深入）”；
- 例如：
align-items: flex-start+align-content: space-between→ 每行内所有子项顶部对齐，同时各行上下均匀分布 - 若想让每行内文字基线对齐（图文混排更自然），用
align-items: baseline；align-content对它完全无影响 -
align-content: stretch（默认）会让每行拉伸填满容器交叉轴，注意这和align-items: stretch不同：前者拉伸的是“行高”，后者拉伸的是“子项高度”
最容易被忽略的其实是交叉轴空间的显式声明——align-content 不是“没效果”，而是你没给它干活的前提。别只盯着属性值改，先确认容器有没有设 height 或 min-height，再看是否真有多行。
