コンテナの高さと幅全体にDIVの子を均等に配分します

Question

空のdivがあり、javascriptで他のdivを作成します。グリッドを作成するようにCSSを設定しました。私の質問は：どのように動的にdivのサイズを調整して、コンテナを均等に塗りつぶすことができますか？

私はそれを図面でうまく説明しようとしましたが、描く技はそれほど良くありません。うまくいけば、あなたは私が望むものを理解するでしょう。

黒い四角は、親のdivで、赤い四角は子供です。 1つのdivを作成すると、親divに（少しのマージンで）埋められるはずです。

2つのdivで、親を半分に分割します。

3の場合は、画像の右上に表示されているように動作します。その他の場合も同様です。

どのように私はCSSでこれを達成できますか？

さらに詳しい情報：

これは私が学校にしなければならないゲームです。これは以前のバージョンですが、divに四角形を付けるという考えがあります。次の作業は、ユーザがどれくらい多くの四角形を再生するかを選択させることです。しかし、それは動的でなければならず、彼らは5や8のような数字を選ぶことができなければなりません。4,9,16,25だけでなく、簡単です。

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

Answer 1

このタイプのレイアウトはCSSフレキシボックスを使用して達成することができます。

まず、display:flexを追加して、ラップ要素をフレックスボックスに置きます。次に、flex:1 1 autoをボックスに追加して、スペースを埋めるために必要に応じて拡大または縮小できるようにします。

フレックスボックスでボックスを1行に詰め込まないようにするには、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>