使用flex-wrap换行，justify-content水平分布，align-items单行垂直居中，align-content多行整体居中，结合calc()宽度控制实现多行多列布局。
要在CSS中实现Flex布局下的垂直居中与水平分布，并支持多行多列的排列，关键在于合理使用flex-direction、justify-content、align-items和flex-wrap等属性。以下是具体实现方式。
1. 基础容器设置：启用Flex并换行
要让子元素在多行中分布，父容器需设置为display: flex并允许换行：
.container {
display: flex;
flex-wrap: wrap; /* 允许换行 */
justify-content: space-between; /* 水平方向均匀分布 */
align-items: center; /* 垂直居中对齐 */
height: 100vh; /* 示例高度，确保有空间居中 */
padding: 20px;
box-sizing: border-box;
}
说明：flex-wrap: wrap让子项在一行放不下时自动折到下一行；align-items: center使每一行的项目在交叉轴（垂直）方向居中。
2. 控制每行项目数量：通过宽度设定
若希望每行显示固定数量的项目（如每行3个），可通过设置子项宽度来控制：
立即学习“前端免费学习笔记（深入）”；
.item {
flex: 0 0 calc(33.333% - 10px); /* 每行3项，留出间距 */
margin-bottom: 10px;
}
建议：使用calc()计算宽度，减去margin空间，避免换行错位。也可用flex-basis单独设置基础宽度。
3. 多行垂直居中增强：使用align-content
当有多行且希望整体内容在容器中垂直居中时，使用align-content：
.container {
align-content: center; /* 多行整体垂直居中 */
min-height: 100vh; /* 配合使用以体现居中效果 */
}
注意：align-items控制单行内项目的垂直对齐，而align-content控制多行之间的分布。若只有一行，align-content无效。
4. 完整示例：3列多行，垂直居中，水平分布
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
align-content: center;
height: 100vh;
padding: 20px;
box-sizing: border-box;
}
.item {
flex: 0 0 calc(33.333% - 10px);
height: 80px;
background: #007bff;
color: white;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
这样即可实现：每行最多3个项目，项目之间水平间距均匀，多行整体垂直居中，单个项目也垂直居中显示。
基本上就这些。关键是理解align-items和align-content的区别，配合flex-wrap和宽度控制，就能灵活实现多行多列的居中与分布效果。
