Justify-content：如果使用 flex-wrap 将孩子的内容包裹到多于 1 行，则居中中断：wrap [重复]

Question

我有一个包含多个子元素的父 div 元素。父 div 包含在外部容器 div 中。我希望父 div 在容器内居中，但问题是父级使用 flex-wrap: wrap 包装其所有子 div。

父 div 按预期在容器中居中：

#container {
  width: 500px;
  display: flex;
  justify-content: center;
  background-color: #c0faff; 
}

#parent {
 display: flex;
 flex-wrap: wrap;
}

.child {
 background-color: #5bb4bb;
 width: 100px;
 height: 100px;
 margin: 5px;
}

<div id="container">
  <div id="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

但是，一旦有 1 个子元素必须包裹到第二行，父 div 就会向左浮动并忽略容器的 justify-content: center; css 属性：

#container {
  width: 500px;
  display: flex;
  justify-content: center;
  background-color: #c0faff; 
}

#parent {
 display: flex;
 flex-wrap: wrap;
}

.child {
 background-color: #5bb4bb;
 width: 100px;
 height: 100px;
 margin: 5px;
}

<div id="container">
  <div id="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

如何让之前的代码sn-p的结果变成这样？：

Answer 1

只有为容纳 flexbox-items 的容器设置固定宽度才能实现此目的。您可以让它更简单一点，并在此处的 CSS 中使用 calc(...) 函数。如果您知道一行应该有多少项目，您可以轻松更改多个断点的数量。如果您将一项的宽度设置为 css 自定义属性，则更容易。

#container {
  width: 500px;
  display: flex;
  justify-content: center;
  background-color: #c0faff; 
}

#parent {
 display: flex;
 flex-wrap: wrap;
 width: calc(4* 110px)
}

.child {
 background-color: #5bb4bb;
 width: 100px;
 height: 100px;
 margin: 5px;
}

<div id="container">
  <div id="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>