要实现Flex布局中多行项目的整体垂直居中，需设置flex-wrap: wrap启用换行，再用align-content: center控制多行在交叉轴上的整体居中；align-items仅影响单行内子项对齐，二者作用对象不同。
要实现 Flex 布局中多行项目的**整体垂直居中**（即所有行在容器内上下居中），关键不是用 align-items，而是启用换行后通过 align-content 控制行与行之间的分布。
1. 必须设置 flex-wrap: wrap
默认情况下 Flex 是单行的（flex-wrap: nowrap），此时 align-content 无效。只有开启换行，让容器内出现「多行」，align-content 才起作用。
- 加上
flex-wrap: wrap或flex-wrap: wrap-reverse - 确保子项总宽度超过容器宽度（或高度，取决于主轴方向），才会实际折行
2. 使用 align-content: center 实现多行整体居中
align-content 用于控制**多行在交叉轴上的对齐方式**。当容器有剩余空间时，它决定各行如何分配这部分空间。
-
align-content: center—— 所有行作为一个整体，在交叉轴上居中 - 其他常用值：
flex-start（顶部对齐）、flex-end（底部对齐）、space-between（首尾撑开）等
3. 注意 align-items 和 align-content 的区别
别混淆这两个属性：
立即学习“前端免费学习笔记（深入）”；
-
align-items：控制**每一行内单个子项**在交叉轴上的对齐（如单行里文字垂直居中） -
align-content：控制**多行作为一个整体**在交叉轴上的位置（如三行内容整体上下居中）
两者可以共存。例如：align-items: flex-start 让每行内项目顶对齐，同时 align-content: center 让这三行整体居中。
4. 完整示例（水平主轴，多行垂直居中）
HTML 结构简单：
Item 1
Item 2
Item 3
Item 4
CSS 如下：
.container {display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
height: 300px;
border: 1px solid #ccc;
}
.container > div {
flex: 0 0 120px;
margin: 5px;
padding: 10px;
background: #e0e0e0;
}
效果：子项按行排列，每行尽可能放满（每项宽 120px，容器宽约 300px → 每行最多 2 个），共两行；这两行整体在 300px 高的容器中垂直居中。
