如何实现Flex布局中第二行3个子元素的居中对齐？

7个flex子容器设置flex-basis: calc(25% - 24px)后，前4个占满第一行，剩下3个在第二行，需要让第二行的3个容器居中显示。

先修正原始代码的错误 #

原始代码有几个问题会导致布局不符合预期：

• .container-7的flex-direction: column是纵向排列，要横向排得改成row；
• 子元素选择器写成了box，正确应该是.box；
• .box的flex-shrink: 1后缺分号，会导致背景色样式失效。

方案一：Flex布局配合伪元素 #

给容器加伪元素，填充第一行的“虚拟位置”，让第二行元素自然居中，同时保留第一行填满的效果：

<div class="container-7">
  <div class="box box1"></div>
  <div class="box box1"></div>
  <div class="box box1"></div>
  <div class="box box1"></div>
  <div class="box box1"></div>
  <div class="box box1"></div>
  <div class="box box1"></div>
</div>

.container-7 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 24px;
  row-gap: 24px; /* 可选，添加行间距 */
}

.box {
  height: 100px;
  flex-basis: calc(25% - 24px);
  flex-grow: 1;
  flex-shrink: 1;
  background-color: orchid;
}

/* 伪元素占一个子元素的宽度，让第二行3个元素居中 */
.container-7::after {
  content: "";
  flex-basis: calc(25% - 24px);
  flex-grow: 0;
  flex-shrink: 0;
}

方案二：改用Grid布局（更简洁） #

Grid布局天生适配这种场景，代码更简单：

<div class="container-7">
  <div class="box box1"></div>
  <div class="box box1"></div>
  <div class="box box1"></div>
  <div class="box box1"></div>
  <div class="box box1"></div>
  <div class="box box1"></div>
  <div class="box box1"></div>
</div>

.container-7 {
  display: grid;
  grid-template-columns: repeat(auto-fill, calc(25% - 24px));
  gap: 24px; /* 同时设置行列间距 */
  justify-content: center; /* 剩余元素自动居中 */
}

.box {
  height: 100px;
  background-color: orchid;
}

内容的提问来源于stack exchange，提问作者Sai Dharani Palle