Justify-content: 如果使用 flex-wrap: wrap 将子内容包裹到超过 1 行，则居中中断

Question

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

父项 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>

如何使前面代码片段的结果看起来像这样？:

Answer 1

只有为容纳 flexbox 项目的容器设置固定宽度才能实现此目的。您可以使它更简单一些，并在此处使用 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>

Justify-content: 如果使用 flex-wrap: wrap 将子内容包裹到超过 1 行，则居中中断

Justify-content: center breaks if child's content is wrapped onto more than 1 row with flex-wrap: wrap

html

css

centering

flexbox