证明父母留下的div

Question

我有以下要求.

绿色父母宽度将根据设备宽度而变化.我需要所有的盒子都在父母的中心.

我已经尝试了以下的东西,但它没有帮助我.

试验1
Parent {text-align:center} box {display:inline-block}.

这导致了以下输出

试用2
Parent {text-align:center} box{float:left}.

这导致了以下输出

试验3
Parent {display:flex} box -> justify-around & justify-between也没有奏效.

.parent {
  text-align: center;
}
.item {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
}

<div class="parent">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

任何有关这方面的帮助将不胜感激.

Answer 1

如果没有 Javascript，使用浮点数和/或内联块会非常困难。

Flexbox 带来了一些希望，但即便如此，也需要一些创造力。

本质上，只要“每行”的最大元素数已知，您就可以创建所需数量的不可见元素，这些元素可以结合使用，justify-content:center通过将最后一行内容推回左侧来实现所需的最后一行外观。

Codepen 演示

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.parent {
  text-align: center;
  border: 1px solid grey;
  width: 80%;
  max-width: 800px;
  margin: 1em auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.item {
  width: 100px;
  height: 100px;
  margin: 10px;
  background: red;
}
.balancer {
  height: 0;
  width: 100px;
  margin: 0 10px;
  visibility: hidden;
}

<div class="parent">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="balancer"></div>
  <div class="balancer"></div>
  <div class="balancer"></div>
  <div class="balancer"></div>

</div>