将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将包装元素转换为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>