Generatore di Flexbox

Come funziona

Flexbox non è complicato, ma c'è una cosa che fa cadere quasi tutti: justify-content e align-items non significano orizzontale e verticale. Significano lungo la direzione e attraverso di essa, e la direzione è qualcosa che imposti tu.

La trappola, detta chiaramente

Con flex-direction: row, justify-content funziona in orizzontale e align-items in verticale. Passa a column e si scambiano completamente. Ogni ora persa con flexbox è essenzialmente questo. La spiegazione qui sotto si aggiorna quando cambi la direzione, così il rapporto è visibile anziché da memorizzare.

Asse principale e asse trasversale

L'asse principale è quello lungo cui scorrono gli elementi, impostato da flex-direction. L'asse trasversale gli è perpendicolare. justify-content distribuisce lo spazio lungo l'asse principale; align-items posiziona gli elementi sull'asse trasversale. Una volta che questi due nomi si fissano in mente, il resto ne consegue.

gap, e perché ha sostituito i margini

gap inserisce spazio tra gli elementi senza aggiungerlo prima del primo e dopo l'ultimo, che è esattamente ciò che i margini sbagliano e che prima si risolveva con trucchi :last-child. È supportato da ogni browser attuale e non c'è più motivo di evitarlo.

nowrap significa restringere, non traboccare

Il valore predefinito è nowrap, e gli elementi si restringono sotto la loro dimensione naturale per starci anziché andare a capo su una nuova riga. Per questo il testo a volte si schiaccia in modo inatteso dentro una riga flex. Impostando wrap gli elementi possono invece scendere; min-width: 0 su un elemento figlio gli impedisce di restringersi oltre il suo contenuto.

Centrare in entrambe le direzioni

justify-content: center con align-items: center centra un elemento in entrambe le direzioni indipendentemente da flex-direction, l'unica combinazione che vale la pena memorizzare a fondo.