如何在CSS中实现Flex垂直居中与水平分布_多行多列结合-css教程-PHP中文网

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

P粉602998670

发布： 2025-11-20 11:52:31

原创

550人浏览过

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

OmniAudio

OmniAudio 是一款通过 AI 支持将网页、Word 文档、Gmail 内容、文本片段、视频音频文件都转换为音频播客，并生成可在常见 Podcast ap

111

查看详情

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垂直居中与水平分布_多行多列结合的详细内容，更多请关注php中文网其它相关文章！