如何将 Flexbox 的整个块居中？

Question

我有多个不同宽度的DIV（DIV可以从数组生成，所以我事先不知道DIV的数量）。我使用带有

flex-wrap

的 Flexbox 来订购它们，如下所示：

.outercontainer {
  border: 1px solid blue;
  width: 400px;
}
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.wide {
  width: 200px;
}
.normal {
  width: 100px;
}
.item {
  border: 1px solid red;
  height: 30px;
}

https://codepen.io/pandaquests/pen/RNbGNLd

除了右侧有一个空格外，这一切看起来都不错：

理想情况下它应该是这样的（整个块的左右空间相等）：

有没有办法让整个区块居中？我尝试过

justify-content:center

，但这也会使最后两个元素居中。我尝试使用

grid-auto-flow: row dense;

网格，但这会使项目重叠：

.outercontainer {
  border: 1px solid blue;
  width: 400px;
}
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-auto-flow: row dense;
  grid-column: span 2;
}
.wide {
  width: 200px;
  background: pink;
}
.normal {
  width: 100px;
}
.item {
  border: 1px solid red;
  height: 30px;
}

https://codepen.io/pandaquests/pen/pvzEvPE

我尝试使用

grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

和

auto-fit

（而不是

auto-fill

）来防止这种情况，但

grid-column:span 2 

它仍然不起作用。

Answer 1

您必须换个角度思考，让元素填充其单元格区域的整个宽度，而不是将整个网格缩小到单元格内部的内容。列在这里设置为

minmax(100px, 1fr)

它不会有所不同。

要保持最多 400px 宽度，您可以尝试根据视口（或父容器）更新填充值

可使用的示例和代码笔：

• 网格：https://codepen.io/gc-nomade/pen/KwPgdbP

.outercontainer {
  border: 1px solid blue;
  padding: 0 calc(50cqw - 200px);
  margin:1em
}

.container {
  display: grid;
  gap: .5em;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-auto-flow: row dense;
}

.wide {
  min-width: 200px;
  background: pink;
  grid-column: span 2
}

.normal {
  min-width: 100px;
}

.item {
  border: 1px solid red;
  height: 30px;
}

section {
  container-type: inline-size;
  max-width: 800px;
  margin: 1em auto;
}

body {
  margin: 0;
}

<div class="outercontainer">
  <div class="container">
    <div class="wide item">item1</div>
    <div class="normal item">item2</div>
    <div class="normal item">item3</div>
    <div class="normal item">item4</div>
    <div class="normal item">item5</div>
    <div class="normal item">item6</div>
    <div class="normal item">item7</div>
    <div class="normal item">item8</div>
    <div class="normal item">item9</div>
    <div class="normal item">item10</div>
  </div>
</div>
<section>
  <div class="outercontainer">
    <div class="container">
      <div class="wide item">item1</div>
      <div class="normal item">item2</div>
      <div class="normal item">item3</div>
      <div class="normal item">item4</div>
      <div class="normal item">item5</div>
      <div class="normal item">item6</div>
      <div class="normal item">item7</div>
      <div class="normal item">item8</div>
      <div class="normal item">item9</div>
      <div class="normal item">item10</div>
    </div>
  </div>
  <section>

• flex https://codepen.io/gc-nomade/pen/qEWabEp

body {
  margin: 0;
}

.outercontainer {
  border: 1px solid blue;
  padding: 0 calc(50cqw - 200px);
  margin: 1em
}

.container {
  display: flex;
  flex-wrap: wrap;
  gap: .5em;
}

.item.wide {
  min-width: 200px;
  flex: 2;
  background: pink;
}

.normal {
  min-width: 100px;
}

.item {
  border: 1px solid red;
  height: 30px;
  flex: 1;
}

section {
  container-type: inline-size;
  max-width: 800px;
  margin: 1em auto;
}

<div class="outercontainer">
  <div class="container">
    <div class="wide item">item1</div>
    <div class="normal item">item2</div>
    <div class="normal item">item3</div>
    <div class="normal item">item4</div>
    <div class="normal item">item5</div>
    <div class="normal item">item6</div>
    <div class="normal item">item7</div>
    <div class="normal item">item8</div>
    <div class="normal item">item9</div>
    <div class="normal item">item10</div>
  </div>
</div>
<section>
  <div class="outercontainer">
    <div class="container">
      <div class="wide item">item1</div>
      <div class="normal item">item2</div>
      <div class="normal item">item3</div>
      <div class="normal item">item4</div>
      <div class="normal item">item5</div>
      <div class="normal item">item6</div>
      <div class="normal item">item7</div>
      <div class="normal item">item8</div>
      <div class="normal item">item9</div>
      <div class="normal item">item10</div>
    </div>
  </div>
  <section>

这似乎很接近您的需求。