Flex布局多行多列垂直居中技巧

还在为CSS Flex布局中的垂直居中和水平分布发愁吗？本文为你提供一套完整的解决方案，教你如何利用Flex布局轻松实现多行多列的灵活排列！通过`flex-wrap`实现自动换行，`justify-content`控制水平方向的元素分布，`align-items`实现单行元素的垂直居中，以及`align-content`实现多行元素的整体垂直居中。更重要的是，结合`calc()`函数进行宽度控制，确保每行显示固定数量的项目，避免错位。掌握`align-items`和`align-content`的区别，配合`flex-wrap`和宽度设置，让你在各种复杂的布局场景中游刃有余。快来学习，让你的网页布局更加美观和专业！

使用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和宽度控制，就能灵活实现多行多列的居中与分布效果。

终于介绍完啦！小伙伴们，这篇关于《Flex布局多行多列垂直居中技巧》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！