変数ammountのインラインブロックdivを使用して画面の100％をどのようにカバーできますか？

Question

私は最小幅と最大幅を持つ必要があり、またインラインブロックであり、画面の100％を常にカバーする必要があるdivをいくつか持っています。 問題は、幅の部分に何を指定して、divが常に100％をカバーするかわからない場合です。

たとえば、最大幅が400、最小幅が5のdivが20％私は1500pxの画面になると、1つのdivは下がるはずですが、他のdivは300pxにとどまるはずです。私はその幅を20％に指定しているので知っていますが、自動的に100％をカバーするようにするために何をすべきかを知ります。

画面が1500pxになると、divsはそれぞれ375px画面が1200ピクセルになるまで、合計幅の25％にする必要があることを意味し、その後繰り返します。

私はメディアのクエリを使用しないようにしようとしていますが、それ以外の方法がない場合は、私はすべきだと思います。

 <style> 
      div{display:inline-block; max-width:400px; min-width:300px; width:20%; height:100px;} 
     </style> 
     <div style="background:red;"> 
     </div><!-- 
     --><div style="background:blue;"> 
     </div><!-- 
     --><div style="background:yellow;"> 
     </div><!-- 
     --><div style="background:magenta;"> 
     </div><!-- 
     --><div style="background:green;"> 
     </div> 
     </body> 

Answer 1

あなたは（略しまたはflex: 1 0 20%;）flex-grow: 1; flex-basis: 20%を設定し、親にして子供たちにdisplay: flex;を使用することができますので、彼らはmin/max-widthを指定し、その後、親の幅を記入し、20％のベース幅を持つように「成長」でしょう

body { 
 
    margin: 0; 
 
} 
 

 
.flex { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.flex > div { 
 
    flex: 1 0 20%; 
 
    max-width: 400px; 
 
    min-width: 300px; 
 
    height: 1em; 
 
    background: #222; 
 
    box-sizing: border-box; 
 
    border: 1px solid white; 
 
}

<div class="flex"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div>