將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>