align-items 控制单行内项目在交叉轴的对齐，始终有效；align-content 管理多行容器中行与行的分布，仅在换行且有多行时生效。2. 两者取值相似但作用对象不同：align-items 影响每行项目的位置，align-content 调整各行整体在容器中的排列，如 center 让行组居中，space-between 分隔行间距。3. 实际应用中，开启 flex-wrap 后，align-items 决定每行子元素垂直对齐方式，align-content 决定多行整体在交叉轴上的分布，二者协同控制多行布局的对齐效果。
align-content 和 align-items 都是 CSS Flexbox 布局中用于控制项目在交叉轴上对齐方式的属性，但它们的作用机制和适用场景有明显区别。
1. 作用对象不同
align-items 控制的是单个行内的项目如何在交叉轴上对齐。如果容器只有一行，这个属性就能决定所有子元素在该行中的垂直对齐方式。
align-content 则控制多行 flex 容器中，各行之间的分布与对齐。它只在 flex 容器出现**换行**（即 flex-wrap: wrap）且有多行时才起作用。如果只有一行，align-content 不会产生任何效果。
2. 使用前提条件不同
- align-items：始终有效，无论是否换行。
- align-content：只有当容器设置了换行（flex-wrap: wrap 或 wrap-reverse），并且存在多余空间在交叉轴上时才生效。
3. 常见取值对比
两者支持的部分取值相似，但行为不同：
立即学习“前端免费学习笔记（深入）”；
- flex-start / flex-end / center：在单行情况下，align-items 使用这些值会让项目靠边上或居中；而 align-content 使用这些值会让多行整体靠边或居中排列。
- space-between / space-around：这些分布方式只对 align-content 有意义，用来分配行与行之间的间距。
4. 实际例子说明
假设有一个高度固定的 flex 容器，子项总高度小于容器，且开启了换行：
- 设置
align-items: center：每行中的项目会在该行内垂直居中。 - 设置
align-content: center：所有行作为一个整体，在容器中垂直居中排列（行之间没有额外间距）。
基本上就这些。记住：align-items 管“行内项目”，align-content 管“行与行”。不复杂但容易忽略使用条件。
