html - 在容器的整个高度和宽度上均匀分布 DIV 子级

Question

我有一个空的 div，我用 javascript 在其中创建了其他 div。我已经设置了我的 CSS，所以它会创建一个网格。我的问题是:如何动态调整 div 的大小，以便它们均匀地填充容器？

我试图用绘图更好地说明它，但我的绘图技巧不是那么好。希望你能明白我想要什么。

黑色方 block 是父级 div，红色方 block 是子级。当我创建一个 div 时，它应该填充父 div(有一点边距)。

如果有两个 div，它会将父级分成两半。

对于 3，它的行为就像您在图像的右上角看到的那样，其他的依此类推。

我如何使用 CSS 完成此操作？

更多信息:

这是我必须为学校制作的游戏。这是以前的版本，但您会想到在 div 中包含正方形。现在下一个任务是让用户选择他们想玩多少个方 block 。但这必须是动态的，他们必须能够选择 5 或 8 之类的数字。不仅仅是 4、9、16、25 等。这太容易了。

https://luukwuijster.io/school/csp/kleurenspel/

Answer 1

这种类型的布局可以使用 CSS Flexbox 实现。

首先通过添加 display:flex 将您的包装元素变成一个 flexbox。接下来将 flex:1 1 auto 添加到您的盒子中，以允许它们根据需要扩大和缩小以填充空间。

为了防止你的盒子被 flexbox 挤成一行，给它们设置一个 min-width 值。我使用了 min-width:30% 但可以更改此数字以满足您的需要。 30% 意味着任何时候一行中的最大框数为 3(因为它刚好低于容器宽度的 1/3 或 33%)。

尝试从下面的示例代码中添加或删除框。

#wrapper {
  display:flex;
  flex-wrap:wrap;
  width:400px;
  height:400px;
}

.box {
  background-color:white;
  border:1px solid black;
  min-width:30%;
  flex:1 1 auto;
  }

<div id='wrapper'>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
</div>