La larghezza del contenitore della scatola flessibile non aumenta

Question

Quando si utilizza la casella flessibile nella direzione predefinita della riga, l'altezza del contenitore aumenta per contenere tutti gli elementi flessibili, anche se è posizionata in modo assoluto.

#container { 
    position: absolute; 
    display: flex; 
    flex-wrap: wrap; 
} 

#container > div { 
    flex: 0 0 200px; 
    height: 200px; 
} 

Vedi http://codepen.io/tamlyn/pen/dPjLoN/?editors=110

Tuttavia se la direzione flex viene modificato in colonna, il contenitore collassa alla larghezza di un singolo elemento flessibile, anche se gli elementi avvolgere sulla colonna successiva.

#container { 
    position: absolute; 
    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
} 

#container > div { 
    flex: 0 0 200px; 
    width: 200px; 
} 

Vedi http://codepen.io/tamlyn/pen/rarbeN?editors=110

Come posso fare il contenitore contiene tutti gli elementi di flessione in modalità column?

Answer 1

Credo che questo sia il CSS che stai cercando:

#container { 
    display: flex; 
    flex-flow: row wrap; 
    border: 1px solid #f00; 
    padding: 1px; 
} 

#container > * { 
    border: 1px solid #555; 
    background-color: #ccc; 
    height: 200px; 
    width: 200px; 
    margin: 1px; 
} 

"contenitore" sarà sempre la larghezza del suo contenitore, in questo caso la pagina, ma ora le caselle sarà regolare al suo interno propriamente.

Fammi sapere se ho frainteso la tua domanda.

Aggiornamento

Ho giocato con quello che stai chiedendo per diversi giorni ormai, e sembra davvero come non è possibile fare quello che stai chiedendo ... almeno non in la direzione che stai chiedendo.

Il contenitore vuole essere la larghezza massima possibile. A meno che non si costringa il contenitore ad essere la larghezza esatta, a quel punto non sarà l'intera larghezza, ma non si fletterà con il contenuto flessibile.

Answer 2

In realtà ho trovato una soluzione solo CSS, ma non è la cosa più perfetta al mondo. Eccolo: http://codepen.io/anon/pen/vEPBKK

Il trucco qui è creare un contenitore visibility: collapsed. In flex, gli oggetti visibility: collapsed si estraggono dal normale flusso flessibile ma mantengono le loro dimensioni ai fini del layout. Questo allarga il contenitore flessibile alla larghezza desiderata ma lascia inalterati gli elementi flessibili. Ci sono alcune avvertenze, però:

1. Questo richiede un po 'di armeggiare. Come potete vedere, la magia <div> è una larghezza impostata ma utilizza :nth-child per determinare quante caselle ci sono prima. Se il tuo disegno attuale si rompe a più o meno di 3 file, dovrai regolarlo e dovrai certamente regolare la larghezza dell'oggetto.
2. A causa di un bug di rendering, questo non funziona in IE. Fortunatamente, l'implementazione errata di IE fa esattamente quello che volevi in ​​primo luogo senza modifiche, quindi tutto quello che devi fare è dare a IE il proprio foglio di stile con alcune istruzioni condizionali e sparare allo div.magic del buon vecchio display: none.

HTML

<div id="container"> 
    <div class="fb"></div> 
    <div class="fb"></div> 
    <div class="fb"></div> 
    <div class="fb"></div> 
    <div class="fb"></div> 
    <div class="fb"></div> 
    <div class="fb"></div> 
    <div class="magic"></div> 
</div> 

CSS

#container { 
    position: absolute; 
    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
    border: 1px solid #f00; 
    height: 650px; 
    padding: 1px; 
} 

#container div.fb { 
    border: 1px solid #555; 
    flex: 0 0 200px; 
    background-color: #ccc; 
    width: 200px; 
    margin: 1px; 
    height: 200px; 
} 

#container > div.magic { 
    height: 0; 
    margin: 0; 
    padding: 0; 
    visibility: collapsed; 
} 

#container > div.magic:nth-child(5), 
#container > div.magic:nth-child(6), 
#container > div.magic:nth-child(7) { 
    width: 408px; 
} 

#container > div.magic:nth-child(8), 
#container > div.magic:nth-child(9), 
#container > div.magic:nth-child(10) { 
    width: 612px; 
} 

#container > div.magic:nth-child(11), 
#container > div.magic:nth-child(12), 
#container > div.magic:nth-child(13) { 
    width: 816px; 
} 

Answer 3

.flex-container { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    
 
    -webkit-flex-flow: row wrap; 
 
    justify-content: space-around; 
 
    border: 1px solid #f00; 
 
} 
 

 
.flex-item { 
 
    background-color: #ccc; 
 
    padding: 5px; 
 
    width: 200px; 
 
    height: 150px; 
 
    line-height: 150px; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 3em; 
 
    text-align: center; 
 
    border: 1px solid #555; 
 
}

<div id="container" class="flex-container"> 
 
    <div class="flex-item">1</div> 
 
    <div class="flex-item">2</div> 
 
    <div class="flex-item">3</div> 
 
    <div class="flex-item">4</div> 
 
    <div class="flex-item">5</div> 
 
    <div class="flex-item">6</div> 
 
    <div class="flex-item">7</div> 
 
</div>

Il primo tentativo non capisco quello che vuoi dire come materiale di riferimento si può vedere questo tutorial https://css-tricks.com/snippets/css/a-guide-to-flexbox/