在容器的整个高度和宽度上均匀分布DIV儿童

Question

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

我试图用绘图更好地说明它，但我的绘画技巧并不好。希望你能理解我想要的东西。

黑色方块是父div，红色方块是孩子。当我创建一个div时，它应该填充父div（略有余量）。

有两个div，它会将父母分成两半。

使用3时，它的行为与您在图像的右上角看到的一样，对其他人来说也是如此。

我怎么能用CSS完成这个？

更多信息：

这是我要上学的游戏。这是以前的版本，但您可以在div中获得正方形。现在，下一个任务是让用户选择他们想要玩多少个方格。但这必须是动态的，他们必须能够选择5或8之类的数字。不仅仅是4,9,16,25等，这太容易了。

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

Answer 1

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

首先通过添加display:flex将包装元素转换为弹性框。接下来将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>