如何在CSS中实现Flex垂直居中与水平分布_多行多列结合

发布时间：2025-11-20

点击量：

使用flex-wrap换行，justify-content水平分布，align-items单行垂直居中，align-content多行整体居中，结合calc()宽度控制实现多行多列布局。

如何在css中实现flex垂直居中与水平分布_多行多列结合

要在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单独设置基础宽度。

Kreado AI

Kreado AI是一个多语言AI视频创作平台，只需输入文本或关键词，即可创作真实/虚拟人物的多语言口播视频。为创作者提供AI赋能

182 查看详情 Kreado AI

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;
}
<p>.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;
}</p>

这样即可实现：每行最多3个项目，项目之间水平间距均匀，多行整体垂直居中，单个项目也垂直居中显示。

基本上就这些。关键是理解align-items和align-content的区别，配合flex-wrap和宽度控制，就能灵活实现多行多列的居中与分布效果。

以上就是如何在CSS中实现Flex垂直居中与水平分布_多行多列结合的详细内容，更多请关注其它相关文章！

上一篇：如何使用CSS设置列表样式_list-style-type

下一篇：使用jQuery或J*aScript高效检测DOM祖先元素类