Machen Sie eine Reihe von Boxen so groß wie möglich durch Eltern beschränkt

Question

Ist es möglich, eine Reihe von festen Seitenverhältnis (16/9) Boxen so groß wie möglich in einem festen Größe Elternelement machen? Die Anzahl der untergeordneten Boxen variiert, da sie dynamisch generiert werden.

Ich dachte an die Verwendung von Flex-Box, aber weiß nicht, wie man eine Pause erzwingt, abhängig von den Dimensionen des Elternteils oder der Anzahl der Kindelemente.

Eine reine CSS-Lösung wäre nett, aber JavaScript ist auch eine Option.

Beispiel mit 5 Boxen:

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

oder 11 Kästen in einem horizontalen Mutterelement (Breite> Höhe):

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

oder 11-Box in einem fast quadratischen Geordnetes Elemente:

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

Answer 1

Meinst du das? Alles, was Sie brauchen, ist flex-flow: row wrap; in Ihrem Container so.

.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

Ich denke, das ist das, was Sie suchen.

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; 
} 

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