nidificati FlexBox colonna all'interno fila FlexBox con avvolgimento

Question

Ho una pagina con le scatole flex nidificato: http://jsfiddle.net/fr0/6dqLh30d/

<div class="flex-group"> 
    <ul class="flex-container red"> 
    <li class="flex-item">1</li> 
    <li class="flex-item">2</li> 
    <li class="flex-item">3</li> 
    </ul> 

    <ul class="flex-container gold"> 
    <li class="flex-item">1</li> 
    <li class="flex-item">2</li> 
    <li class="flex-item">3</li> 
    <li class="flex-item">4</li> 
    <li class="flex-item">5</li> 
    </ul> 

    <ul class="flex-container blue"> 
    <li class="flex-item">1</li> 
    <li class="flex-item">2</li> 
    <li class="flex-item">3</li> 
    <li class="flex-item">4</li> 
    <li class="flex-item">5</li> 
    <li class="flex-item">6</li> 
    <li class="flex-item">7</li> 
    <li class="flex-item">8</li> 
    </ul> 
<div> 

E il (relativo) CSS:

.flex-group { 
    display: flex; 
    flex-direction: row; 
    height: 500px; 
} 

.flex-container { 
    padding: 0; 
    margin: 0; 
    list-style: none; 
    border: 1px solid silver; 
    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
    flex: 0 0 auto; 
} 

.flex-item { 
    padding: 5px; 
    width: 100px; 
    height: 100px; 
    margin: 10px; 

    line-height: 100px; 
    color: white; 
    font-weight: bold; 
    font-size: 2em; 
    text-align: center; 
} 

Il FlexBox esterno (.flex-group) è pensato per stendere da sinistra a destra. Le Flexbox interne (.flex-container) sono progettate per essere disposte dall'alto verso il basso e devono essere avvolte se non c'è spazio sufficiente (che non è presente nel mio jsfiddle). Quello che voglio succedere è che gli .flex-container cresceranno nella direzione X quando avviene il wrapping. Ma non sta succedendo. Invece, i contenitori sono traboccanti.

Quello che voglio farlo sembrare come (in Chrome): https://dl.dropboxusercontent.com/u/57880242/flex-good.png

C'è un modo per ottenere le .flex-container s per dimensioni in modo appropriato nella direzione X? Non voglio hard-code la loro larghezza, dal momento che gli elementi che appaiono in questi elenchi saranno dinamici.

Answer 1

Ho giocato con questo per alcuni minuti e penso di avere quello che stai cercando.

Ecco il CSS

.flex-group { 
    margin: auto; 
    display: flex; 
    flex-direction: row; 
    justify-content: space-around; 
} 

.flex-container { 
    flex: 0 1 auto; 

    display: flex; 
    flex-flow: row wrap; 
    align-items: space-around; 
    align-content: flex-start; 

    padding: 0; 
    margin: 0; 
    list-style: none; 
    border: 1px solid silver; 
} 

.red li { 
    background: red; 
} 

.gold li { 
    background: gold; 
} 

.blue li { 
    background: deepskyblue; 
} 

.flex-item { 
    flex: 0 1 auto; 

    padding: 5px; 
    width: 100px; 
    height: 100px; 
    margin: 10px; 

    line-height: 100px; 
    color: white; 
    font-weight: bold; 
    font-size: 2em; 
    text-align: center; 
} 

Ed ecco un updated fiddle per vederlo in azione.

Answer 2

Interessante, mi diverto anche con esso. Ho dato al flex-container un flex: 1 100%; Questo distribuisce uniformemente i contenitori al 100%; I blocchi scorreranno nel loro spazio contenitore e i contenitori manterranno la stessa altezza e peso, indipendentemente dalla dimensione della finestra.

.flex-container { 
    flex: 0 100%; 
    display: flex; 
    flex-flow: row wrap; 
    align-items: space-around; 
    align-content: flex-start; 
    padding: 0; 
    margin: 0; 
    list-style: none; 
    border: 1px solid silver; 
} 

See fiddle here