列中的div，扩展为父宽度

Question

我正在寻找一种列出多个div的方法，如果它们不合适，可以将它们移动到一个新的行。一些图片可能更好地说明我的需求：

div（红色框）的高度和宽度是不变的。

Bootstrap不是一个选项。

这些盒子也必须居中，所以当你开始增加父宽度时，它们应该自动居中，而不会在侧面留下间隙。

谢谢你指点我正确的方向。

Answer 1

使用display: inline-block：

.box {
  display: inline-block;
  width: 250px;
  height: 100px;
  background-color: red;
}

.boxWrapper {
  text-align: center;
}

<div class="boxWrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

另外，请参阅this小提琴。

要仅使容器居中，您可以使用display: grid：

.box {
  width: 250px;
  height: 100px;
  background-color: red;
}

.boxWrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, 250px);
  justify-content: center;
}

<div class="boxWrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

或者看看this小提琴。

但是，IE不支持此功能。但是，如果不使用CSS Grid，我无法找到不同的方法。