Flexbox

Prima del flexbox, centrare un riquadro in verticale richiedeva dei trucchi. Con display: flex bastano due dichiarazioni: justify-content e align-items.

Una riga o una colonna

Il flexbox, il modulo CSS Flexible Box Layout, dispone un gruppo di riquadri lungo una linea. Metti display: flex su un contenitore e i suoi figli diretti, gli elementi flex, si mettono in fila uno accanto all'altro invece di impilarsi. Quell'unica dichiarazione basta per una barra di menu, una fila di pulsanti o una scheda il cui piè di pagina deve restare in fondo. Il flexbox lavora in una dimensione alla volta: o una riga o una colonna. Quando ti servono righe e colonne insieme, la griglia, nella prossima unità, di solito è lo strumento migliore.

Due assi

Nel flexbox tutto si descrive in base a due assi. L'asse principale è la direzione in cui scorrono gli elementi, impostata da flex-direction: row (il valore predefinito) o column. L'asse trasversale è perpendicolare a esso. justify-content distribuisce gli elementi lungo l'asse principale: flex-start, center, flex-end, space-between (primo e ultimo elemento ai bordi, spazi uguali in mezzo) o space-around. align-items li posiziona sull'asse trasversale: stretch (il valore predefinito, tutti alti quanto il più alto), flex-start, center o flex-end. Quindi un riquadro si centra in entrambe le direzioni con justify-content: center e align-items: center.

.bar {
  display: flex;
  justify-content: space-between;  /* logo left, menu right */
  align-items: center;             /* vertically centred */
  gap: 16px;                       /* space between items */
}
.cards { display: flex; flex-wrap: wrap; gap: 12px; }
.card  { flex: 1 1 200px; }        /* grow, shrink, start at 200px */

Spazi e ritorno a capo

gap mette spazio tra gli elementi senza aggiungerne ai bordi esterni, che di solito è proprio ciò che vuoi e che con i margini è scomodo. Per impostazione predefinita gli elementi flex restano su una riga e si restringono per starci, anche a costo di schiacciarsi. flex-wrap: wrap permette loro di passare a una nuova riga quando non c'è abbastanza spazio, così una fila di quattro schede su un portatile può diventare due file da due su un tablet e una sola colonna su un telefono, senza media query.

Come gli elementi crescono e si restringono

La forma abbreviata flex su un elemento accetta tre valori. flex-grow dice quanto dello spazio avanzato prende l'elemento rispetto ai fratelli; flex-shrink dice quanto volentieri si restringe quando lo spazio finisce; flex-basis è la dimensione di partenza prima di crescere o restringersi. flex: 1 1 200px significa partire da 200 pixel, poi dividere in parti uguali lo spazio in più con gli altri elementi che hanno anch'essi grow 1. flex: 1 da solo abbrevia 1 1 0%, che rende tutti gli elementi larghi uguali. Dai a un elemento flex-grow: 2 e agli altri 1, e prenderà il doppio della loro parte di spazio avanzato.

Ordine visivo e ordine reale

Il flexbox può cambiare l'ordine in cui compaiono gli elementi, con flex-direction: row-reverse o con la proprietà order, senza toccare l'HTML. Usalo con cautela. Il focus da tastiera e i lettori di schermo seguono comunque l'ordine dell'HTML, quindi se lo schermo mostra Contact prima di Home ma il tasto Tab visita prima Home, chi usa la tastiera si perde. Quando l'ordine conta per il significato, cambialo nell'HTML.