Flexbox: flex-grow, flex-shrink, flex-basis
Le proprietà flex-grow, flex-shrink e flex-basis controllano come gli elementi flex si espandono o contraggono.
flex-grow
Definisce quanto un elemento può crescere rispetto agli altri:
.item { flex-grow: 1; } /* Cresce proporzionalmente */
.item-double { flex-grow: 2; } /* Cresce il doppio */flex-shrink
Definisce quanto un elemento può restringersi:
.item { flex-shrink: 1; } /* Può restringersi */
.item-fixed { flex-shrink: 0; } /* Non si restringe */flex-basis
Definisce la dimensione iniziale prima della distribuzione dello spazio:
.item { flex-basis: 200px; }Shorthand flex
.item { flex: 1 1 200px; } /* grow shrink basis */
.item { flex: 1; } /* Equivale a flex: 1 1 0 */