Come posso consentire la crescita di articoli flessibili mantenendo le stesse dimensioni?

Question

Flexbox è uno degli strumenti più interessanti che un web designer possa desiderare. Sfortunatamente, a volte non è immediatamente evidente ciò che dovrei fare. Prendi, ad esempio, this plunk. Mi piacerebbe che gli elementi si espandessero per riempire la fila, senza espandersi completamente nell'ultima fila.
mio CSS contiene questa roba importante:

.recipe-picker recipe { 
    -webkit-flex: 0 1 8em; 
    flex: 0 1 8em; 

    height: 12em; 
} 

Se cambio la 0 a qualsiasi numero positivo (che corrisponde alla proprietà flex-grow), l'ultima riga oggetto si estenderà in un modo super brutto. Il resto degli oggetti si comporta piuttosto bene, ma l'ultima riga dovrebbe mantenere le stesse dimensioni del resto degli elementi.
Cosa posso fare per risolvere questo comportamento?

Answer 1

Questo è qualcosa che non può essere espresso tramite CSS Flexbox al momento. Qualcuno asked basically this exact question sulla Mailing List CSS Working Group qualche giorno fa, e il response era: "Al momento, no, questo non è possibile Si tratta di un elemento ad alta priorità per Flexbox 2, anche se

Si può.. essere in grado di incidere qualcosa come desiderato tramite max-width, anche se - che sarà impedire che gli elementi flessibili (in particolare quelli sull'ultima riga) di crescere indefinitamente Ecco un forked version of your plunk con un diverso da zero flex-crescere, e con max-width: 10em

..

(Ho scelto 10em in modo arbitrario, potresti anche utilizzare ad esempio max-width: calc(100%/5), se vuoi assicurarti che ogni elemento flessibile occupi non più di 1/5 della linea, per esempio.)

Answer 2

Ho raggiunto ciò che stavi cercando regolando flex-shrink.

.recipe-picker recipe { 
flex: 0 0 8em; 
} 

cerco di pensare di flex-grow e flex-shrink come "il permesso di espandere". Quando uno dei due ha un valore, significa che l'elemento ha il permesso di crescere. Quando tutti gli elementi hanno una crescita flessibile, si espandono alla stessa dimensione. Ma la stessa regola vale anche se tutti hanno un valore flex-shrink.

http://plnkr.co/edit/sxHUzIRPlbstpOzoGcR6?p=preview

Answer 3

ho avuto lo stesso identico problema, e sono riusciti a trovare una soluzione alternativa completamente funzionante per affrontare questo FlexBox lacuna.

Dato che questo è un duplicato di this other question, e sarebbe sbagliato per copiare la mia risposta in questo caso, ho intenzione di collegare ad esso, per quei Googler che si trovano qui e non là:

How to keep wrapped flex-items the same width as the elements on the previous row?