Cheat sheet di Flexbox e Grid (interattivo) con Tailwind | We.Inc
Ogni proprietà di flexbox e CSS grid su un contenitore live che puoi modificare, un builder di grid-template-areas, una guida per scegliere tra flex e grid e le classi Tailwind.
Cheat sheet di Flexbox e Grid
Flexbox dispone gli elementi in una sola direzione, una riga o una colonna, ed è ideale per toolbar, barre di navigazione e centratura. Grid colloca gli elementi in righe e colonne contemporaneamente ed è adatto ai layout di pagina e alle gallerie di card. Imposta display: flex o display: grid sul genitore, poi usa le proprietà qui sotto; ognuna aggiorna un contenitore live in questa pagina.
Flexbox o grid?
Layout
Scelta
Centrare un elemento in un box
Entrambi: grid con place-items: center è il più breve
Una fila di pulsanti o link di navigazione
Flexbox
Elementi di larghezza sconosciuta che devono andare a capo
Flexbox con flex-wrap
Card in colonne uguali
Grid con repeat(auto-fill, minmax())
Header, sidebar, contenuto principale, footer
Grid con grid-template-areas
Allineare elementi tra righe e colonne
Grid
Due contenitori live, uno flex e uno grid, con un controllo per ogni proprietà del contenitore e per un elemento a scelta. Ogni modifica mostra il CSS e la classe Tailwind. Sotto, disegna un layout di pagina nel builder di grid-template-areas e copia il risultato. Le tabelle di riferimento si stampano in modo pulito.
Usa i controlli di flexbox per modificare il contenitore, poi scegli un elemento per provare grow, shrink, basis, order e align-self.
Fai lo stesso nel playground di grid, compresi gli span che estendono un elemento su più colonne o righe.
Nel builder delle aree, scegli il nome di un'area e clicca sulle celle per colorarle. Il CSS del contenitore e di ogni area appare qui sotto.
Premi Stampa per avere le tabelle delle proprietà su carta o in PDF.
Per spaziare gli elementi parti da gap invece che dai margini. Aggiunge spazio solo tra gli elementi, mai sui bordi esterni.
flex: 1 su ogni elemento crea colonne di uguale larghezza che rispondono comunque al contenuto; grid con colonne 1fr ignora la larghezza del contenuto.
Usa order e il posizionamento di grid solo per ritocchi visivi. Chi usa la tastiera o uno screen reader segue l'ordine del sorgente, quindi l'ordine dell'HTML deve comunque avere senso.
minmax(0, 1fr) al posto di 1fr impedisce a una parola lunga o a un'immagine larga di allargare una colonna della griglia oltre la sua quota.
Domande frequenti
Qual è la differenza tra justify-content e align-items?
justify-content agisce lungo l'asse principale, che in una riga flex va da sinistra a destra. align-items agisce trasversalmente, dall'alto in basso in una riga. Se imposti flex-direction su column le due direzioni fisiche si scambiano, ed è per questo che a volte la centratura sembra usare la proprietà sbagliata.
Perché justify-content non fa nulla?
Ha effetto solo quando c'è spazio libero sull'asse principale. Se un elemento ha flex-grow: 1 o gli elementi riempiono la riga, non resta nulla da distribuire. In grid, justify-content sposta l'intero insieme di tracce, mentre justify-items allinea gli elementi dentro le proprie celle.
Come funzionano le grid-template-areas?
Disegni il layout come stringhe, una per riga, con un nome per ogni cella, per esempio "header header" "side main". Ogni figlio poi si prende un nome con grid-area: header. Le aree devono formare rettangoli, e un punto indica una cella vuota.
Posso usare flexbox dentro grid?
Sì, ed è comune. Grid colloca le grandi aree o le card, e flexbox dispone il contenuto dentro ognuna, per esempio un'icona accanto a un'etichetta o un footer fissato in fondo a una card.
gap è supportato in flexbox?
Sì. Tutti i principali browser attuali supportano gap nei contenitori flex oltre che in grid, quindi il vecchio trucco dei margini negativi sul contenitore non serve più.
I due assi
Ogni contenitore flex ha un asse principale definito da flex-direction e un asse trasversale perpendicolare. Le proprietà che iniziano con justify agiscono sull'asse principale e quelle che iniziano con align sull'asse trasversale. Una volta capito questo, la maggior parte dei rompicapi di flexbox diventa una questione di quale asse intendi.
Grid invece ha una coppia di assi fissa: inline (di solito orizzontale) e block (di solito verticale). justify-* allinea lungo l'asse inline e align-* lungo l'asse block, sia per l'intera griglia sia per gli elementi dentro le loro celle.
Come gli elementi flex decidono la propria dimensione
Ogni elemento parte dal suo flex-basis, o dalla dimensione del contenuto quando basis è auto. Se nella riga avanza spazio, lo spazio libero viene diviso in proporzione a flex-grow. Se la riga è troppo piena, gli elementi si restringono in proporzione a flex-shrink moltiplicato per il loro basis.
La scorciatoia flex: 1 significa grow 1, shrink 1, basis 0%, quindi ogni elemento finisce con la stessa larghezza qualunque sia il suo contenuto. flex: auto mantiene la dimensione del contenuto come punto di partenza, quindi le etichette più lunghe ottengono box più larghi.
Griglie responsive senza media query
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) inserisce tante colonne di almeno 220 pixel quante ne consente il contenitore e le allarga per riempire la riga. Le card si ridispongono da una colonna su un telefono a quattro o cinque su uno schermo largo, senza breakpoint.
auto-fit si comporta allo stesso modo finché gli elementi non sono meno delle colonne: auto-fill mantiene le colonne vuote, mentre auto-fit le comprime così gli elementi esistenti si allargano su tutta la riga.