可能な限り大きな箱を一連の箱にする

Question

固定サイズの親要素の中で可能な限り固定縦横比（16/9）のボックスを作成できますか？子ボックスの量は、動的に生成されるにつれて変化します。

私はフレックスボックスの使用を考えていましたが、親の寸法や子要素の量によってブレークを強制する方法はわかりません。

純粋なCSSソリューションがいいですが、JavaScriptを使うこともできます。

5つのボックス付き例：水平親要素で

---------------- 
| | | | 
---------------- 
| | | 
----------- 

または11箱（幅>高さ）：

------------------------- 
| | | | | | | 
------------------------- 
| | | | | | 
--------------------- 

又は11ボックスほぼ正方形親要素で：

----------------- 
| | | | | 
----------------- 
| | | | | 
----------------- 
| | | | 
------------- 

Answer 1

このような意味ですか？あなたが必要とするのは、そのような容器の中にflex-flow: row wrap;だけです。

.container { 
 
    background: #f68a37; 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    width: 240px; 
 
} 
 
.box { 
 
    height: 50px; 
 
    width: 50px; 
 
    margin: 5px; 
 
    background: #8af637; 
 
} 
 
.container[large] { 
 
    width: 480px; 
 
}

<div class="container"> 
 
    <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 class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
</div> 
 
<br /> 
 
<div large class="container"> 
 
    <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 class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
</div> 
 
<br /> 
 
<div class="container"> 
 
    <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 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 class="box"></div> 
 
</div> 
 
<br /> 
 
<div large class="container"> 
 
    <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 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 class="box"></div> 
 
</div>

Answer 2

私は、これはあなたが探していたものだと思います。

HTML

<div class="main-wrapper"> 
    <div class="wrapper"> 
    <div class="main"> 
    </div> 
    </div> 
    <div class="wrapper"> 
    <div class="main"> 
    </div> 
    </div> 
    <div class="wrapper"> 
    <div class="main"> 
    </div> 
    </div> 
    <div class="wrapper"> 
    <div class="main"> 
    </div> 
    </div> 
    <div class="wrapper"> 
    <div class="main"> 
    </div> 
    </div> 
</div> 

CSS

.main-wrapper { 
    width: 100vw;//making it full screen, or you can also use fixed size here 
    background #fff; 
} 
.wrapper { 
    width: 20%; // 100/the number of children you want, in the case 5 
    display: inline-block; 
    position: relative; 
    float:left; 
    border: 1px solid #fff; // just for showing the boxes 
} 
.wrapper:after { 
    padding-top: 56.25%; 
    /* 16:9 ratio */ 
    display: block; 
} 
.main { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    background-color: deepskyblue; //just for demonstrating 
    color: white; 
} 

https://jsfiddle.net/e34a5gbx/1/