align-items控制单行中项目在交叉轴的对齐方式，如center、stretch等；align-content控制多行容器中行与行之间的空间分布，如space-between、stretch，仅在换行时生效。
align-content 和 align-items 都是 CSS 中用于控制 Flexbox 或 Grid 容器中项目在交叉轴上对齐方式的属性，但它们的作用机制和适用场景有明显区别。
1. align-items：控制单个项目的对齐
这个属性定义的是容器内所有项目在交叉轴（cross axis）上的对齐方式，针对的是“每一项”本身。 它适用于单行或多行布局，但如果只有一行，它的效果最常见也最直观。- flex-start：项目在交叉轴起点对齐
- flex-end：项目在交叉轴终点对齐
- center：项目在交叉轴居中对齐
- baseline：项目按基线对齐
- stretch（默认值）：项目拉伸以填满容器（前提是项目没有设置固定高度）
align-items: center 会让所有子元素在垂直方向居中对齐。
2. align-content：控制多行内容的分布
这个属性只在容器中有多行内容时才起作用（比如 flex-wrap: wrap），它控制的是“行与行之间”在交叉轴上的空间分配。 可以把每行看作一个整体，align-content 决定这些“行整体”如何在容器中排列。- flex-start：行堆叠在交叉轴起点
- flex-end：行堆叠在终点
- center：行整体居中
- space-between：行之间均匀分布，首尾行贴边
- space-around：行之间有相等间距
- stretch（默认值）：行拉伸以填满剩余空间
align-content 不会生效，因为没有多余空间需要分配。
关键区别总结
align-items 关注的是“每个项目怎么对齐”，而 align-content 关注的是“多行之间怎么分布”。 当只有一行时，align-content 无效；当有多行且存在交叉轴方向的额外空间时，align-content 才能体现作用。
基本上就这些。理解清楚“单个项目对齐”和“多行整体分布”的区别，就能正确使用这两个属性了。
