flex-grow, flex-shrink, flex-basis e la shorthand flex

Finora abbiamo visto proprietà applicate al genitore (container). Ora esploriamo le tre proprietà che si applicano ai singoli figli (items) per determinare il loro comportamento quando c’è spazio in eccesso o in difetto.

Queste tre proprietà determinano la vera flessibilità di Flexbox.

1. flex-basis (La dimensione ideale)

Pensa a flex-basis come a un width (o height se sei in column) più intelligente. Definisce la dimensione di partenza dell’elemento prima che lo spazio in eccesso venga distribuito.

.item {
  flex-basis: 200px; /* "Vorrei essere largo 200px, se possibile" */
}

Differenza col width: Se usi width, la dimensione è rigida. Se usi flex-basis, è un suggerimento di partenza: l’elemento accetterà di restringersi se manca spazio o di crescere se ce n’è troppo (in base a grow e shrink).

2. flex-grow (La crescita)

Se il contenitore è più grande della somma dei suoi figli, avanza dello spazio vuoto. flex-grow (che accetta un numero senza unità) dice all’elemento in che proporzione può “mangiarsi” quello spazio avanzato. Di default è 0 (non crescere).

.item-1 { flex-grow: 1; }
.item-2 { flex-grow: 2; }

Se applichi queste regole, .item-1 e .item-2 occuperanno tutto lo spazio della riga. Tuttavia, .item-2 crescerà il doppio più in fretta di .item-1, prendendosi due terzi dello spazio avanzato disponibile.

Un uso comune: se metti flex-grow: 1 su un singolo elemento e 0 sugli altri, quell’elemento assorbirà lo spazio libero e spingerà gli altri verso i bordi.

3. flex-shrink (Il restringimento)

Cosa succede se il contenitore è troppo piccolo per ospitare i figli (e flex-wrap è nowrap)? Gli elementi devono restringersi. flex-shrink accetta un numero che determina la “velocità” con cui l’elemento si schiaccia rispetto agli altri. Di default è 1 (tutti si restringono in modo uguale).

.logo { flex-shrink: 0; } /* Mantiene la dimensione iniziale */
.testo { flex-shrink: 1; } /* "Schiacciami pure se serve" */

Mettere flex-shrink: 0 a un’icona o a un’immagine dentro un layout flexbox può evitare deformazioni quando lo schermo si restringe.

La scorciatoia flex (Shorthand)

Nella pratica si usa spesso la scorciatoia flex, che accorpa le tre proprietà nell’ordine: grow, shrink, basis.

.item {
  /* grow: 1 | shrink: 0 | basis: 200px */
  flex: 1 0 200px; 
}

Tre valori di flex da conoscere

1. flex: 1; (equivale a 1 1 0%). L’elemento crescerà e si restringerà come gli altri elementi con flex: 1, creando colonne di uguale larghezza.
2. flex: auto; (Equivale a 1 1 auto). L’elemento cresce e si restringe, ma le sue dimensioni si basano sul contenuto interno.
3. flex: none; (equivale a 0 0 auto). L’elemento non cresce e non si restringe. Mantiene le dimensioni del suo contenuto o del suo width.