css flex - アイテムのサイズを最大化しながら異なるサイズのコンテナを保持しています

Question

異なるサイズのコンテナ内に同じサイズのアイテム（数は異なる場合があります）のフローグリッドを表示するコンポーネントを作成しようとしています。私はできるだけ大きく（その比率を維持しながら）大きなアイテムを入れ、内部にうまく収めておいてできるだけ容器をいっぱいにしたいと思います。

ハードコードされた縮尺の値でスニペットを作成しましたが、私の質問は - 縮尺を自動的に行うことができますか？ 少なくとも、どのような方法で計算を行うことを提案できますか？

私が考えることができる唯一のことは、さまざまなスケールを試して最終的な面積を測定することですが、それは非常にエレガントではありません。ここで

おかげ

function set_state(cls, scl) { 
 
    document.getElementById("cont").className = cls; 
 

 
    [].slice.call(document.getElementsByClassName("it")) 
 
    .map((e) => { 
 
     e.style.width = 50 * scl + 'px'; 
 
     e.style.height = 70 * scl + 'px'; 
 
    }); 
 

 
}

#cont { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    align-content: center; 
 
    align-items: center; 
 
    justify-content: center; 
 
    background-color: #00ff00; 
 
} 
 

 
.it { 
 
    width: 50px; 
 
    height: 70px; 
 
    margin: 10px; 
 
    background-color: #b33; 
 
} 
 

 
.shape1 { 
 
    width: 300px; 
 
    height: 200px; 
 
} 
 
.shape2 { 
 
    width: 200px; 
 
    height: 400px; 
 
} 
 
.shape3 { 
 
    width: 300px; 
 
    height: 500px; 
 
} 
 
.shape4 { 
 
    width: 290px; 
 
    height: 280px; 
 
} 
 
.shape5 { 
 
    width: 210px; 
 
    height: 380px; 
 
}

No Scale 
 
<button onClick='set_state("shape1", 1)'>shape 1</button> 
 
<button onClick='set_state("shape2", 1)'>shape 2</button> 
 
<button onClick='set_state("shape3", 1)'>shape 3</button> 
 
<button onClick='set_state("shape4", 1)'>shape 4</button> 
 
<button onClick='set_state("shape5", 1)'>shape 5</button> 
 

 
<br/><br/> 
 
Scale 
 
<button onClick='set_state("shape1", .8)'>shape 1</button> 
 
<button onClick='set_state("shape2", .92)'>shape 2</button> 
 
<button onClick='set_state("shape3", 1.45)'>shape 3</button> 
 
<button onClick='set_state("shape4", 1)'>shape 4</button> 
 
<button onClick='set_state("shape5", 1)'>shape 5</button> 
 

 
<br/><br/><br/><br/> 
 

 
<div id="cont" class="shape5"> 
 
    <div class="it">&nbsp;</div> 
 
    <div class="it">&nbsp;</div> 
 
    <div class="it">&nbsp;</div> 
 
    <div class="it">&nbsp;</div> 
 
    <div class="it">&nbsp;</div> 
 
    <div class="it">&nbsp;</div> 
 
    <div class="it">&nbsp;</div> 
 
    <div class="it">&nbsp;</div> 
 
    <div class="it">&nbsp;</div> 
 
    <div class="it">&nbsp;</div> 
 
</div>

Answer 1

はflex : x x x;とmax-widthとmin-widthとCSSのデモ+ textareaのようにサイズを変更することができます包装容器です。

javascriptで設定した内容と似ています。設定する

値はflex-basis、max/min-width擬似要素の垂直paddingあります。

比率は擬似要素を介して設定されます。

#cont { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    margin: 1em; 
 
    padding: 15px; 
 
    justify-content:center; 
 
} 
 

 
.it { 
 
    background: tomato; 
 
    margin:1em; 
 
    flex:1 0 15%; 
 
    max-width:15%; 
 
    min-width:100px; 
 
} 
 
.it:before { 
 
    content:''; 
 
    display:block;; 
 
    padding-top:100%; 
 
} 
 
/* demo purpose */ 
 
.resize { 
 
    resize: both; 
 
    border: solid; 
 
    overflow: scroll; 
 
    text-align:center; 
 
}

<div class="resize"> 
 
<h1> to run in full page mode to test behavior</h1> 
 
    <div id="cont"> 
 
    <div class="it">&nbsp;</div> 
 
    <div class="it">&nbsp;</div> 
 
    <div class="it">&nbsp;</div> 
 
    <div class="it">&nbsp;</div> 
 
    <div class="it">&nbsp;</div> 
 
    <div class="it">&nbsp;</div> 
 
    <div class="it">&nbsp;</div> 
 
    <div class="it">&nbsp;</div> 
 
    <div class="it">&nbsp;</div> 
 
    <div class="it">&nbsp;</div> 
 
    </div> 
 
</div>

私は質問:)