Una solida conoscenza di Flexbox e CSS Grid è necessaria se si desidera creare siti Web straordinari e reattivi.
Se hai scritto CSS per un certo periodo di tempo, è probabile che tu abbia almeno sentito parlare di questi termini. Potresti anche aver usato uno o entrambi in una certa misura. Sono entrambe parti potenti dei CSS, con casi d'uso simili ma leggermente diversi.
Cos'è Flexbox?
Flexbox è un metodo di layout CSS unidimensionale che esiste da un po' di tempo. Puoi pensare a Flexbox come a un insieme di proprietà CSS correlate che puoi utilizzare per allineare gli elementi HTML in un contenitore e gestire lo spazio tra di loro.
Prima di Flexbox, questo tipo di layout richiedeva un uso frustrante e ingombrante del float e proprietà di posizione.
Se sei preoccupato per il supporto del browser per Flexbox, non esserlo. Secondo caniuse.com, tutti i browser moderni supportano Flexbox.
Le basi di Flexbox
Mentre Flexbox include molte proprietà CSS, le basi sono piuttosto semplici. L'utilizzo di Flexbox inizia sempre dichiarando un contenitore padre come contenitore flessibile aggiungendo
display: flessibile alle sue regole di stile. In questo modo tutti i figli di questo elemento diventano automaticamente elementi flessibili.Successivamente, puoi controllare la distribuzione dello spazio all'interno del contenitore flessibile utilizzando il file proprietà justify-content. Puoi controllare l'allineamento degli elementi flessibili con il file align-elementi proprietà.
Ecco un esempio di codice che utilizza Flexbox per distribuire uniformemente lo spazio in un contenitore tra i relativi figli e allinearli tutti al centro del contenitore. Questo è l'HTML:
<classe div="contenitore">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>Questo è il CSS:
.contenitore {
display: flessibile;
larghezza: 100%;
giustifica-contenuto: spazio-intorno;
align-items: centro;
bordo: 1px nero pieno;
altezza: 200px;
}
.contenitore > div {
altezza: 100px;
larghezza: 100px;
colore di sfondo: rosso;
colore bianco;
dimensione carattere: 5rem;
text-align: centro;
bordo-raggio: 5px;
}
Ed ecco l'output:
Cos'è la griglia CSS?
CSS Grid è un sistema di layout complementare a Flexbox. Flexbox è potente, ma poco adatto a certi tipi di layout. Cercare di strutturare la struttura di un'intera pagina con Flexbox finirà per essere un compito frustrante che coinvolge markup brutto, non semantico e CSS hacky.
CSS Grid non è un sostituto di Flexbox, ma piuttosto un sistema alternativo per alcune situazioni.
Il supporto per CSS Grid non è così esteso come lo è per Flexbox, ma Grid lo è ragionevolmente ben supportato nel 2022.
Le basi della griglia CSS
Il concetto di Grid è semplice. Come suggerisce il nome, CSS Grid ti consente di dividere lo spazio in un contenitore genitore in una griglia di righe e colonne, con qualsiasi numero di righe/colonne che ti piace. Successivamente, specifichi la posizione degli elementi figli facendo riferimento alle righe della griglia del genitore.
Inizia aggiungendo visualizzazione: griglia al contenitore padre. Quindi usa il grid-template-righe E colonne-modello-griglia properties per specificare le righe e le colonne in cui suddividere la griglia. È quindi possibile utilizzare il griglia-colonna E griglia-riga properties sugli elementi figlio per dire loro dove dovrebbero essere nella griglia. Diamo un'occhiata a un esempio di Grid che utilizza la configurazione a cinque elementi di prima, ma in una disposizione più complicata.
Ecco l'HTML:
<classe div="contenitore">
<div>1</div>
<classe div="due">2</div>
<classe div="tre">3</div>
<classe div="quattro">4</div>
<classe div="cinque">5</div>
</div>Ecco il CSS:
.contenitore {
visualizzazione: griglia;
larghezza: 100%;
grid-template-righe: ripetizione (3, 1fr);
grid-template-colonne: ripetizione (3, 1fr);
spacco: 0.5rim;
bordo: 1px nero pieno;
altezza: 300px;
}.contenitore > div {
colore di sfondo: rosso;
colore bianco;
dimensione carattere: 5rem;
text-align: centro;
bordo-raggio: 5px;
}
.contenitore > .due {
griglia-riga: 2;
griglia-colonna: 2;
}
Ecco l'output:
CSS Grid include anche una buona dose di altre proprietà che puoi utilizzare per creare layout più complessi.
Quale dovresti usare?
Innanzitutto, è importante notare che nulla ti impedisce di utilizzare Flexbox e Grid insieme e, in alcuni casi, questa è la scelta ottimale. Detto questo, rispondiamo alla domanda su quali layout ciascuno di questi sistemi è più adatto all'implementazione.
Flexbox è più adatto alla costruzione di layout che comportano l'allineamento e la distribuzione di elementi su un'unica linea. Esempi di questo tipo di layout sono l'allineamento delle icone alla fine di una sezione o la disposizione dei collegamenti in una barra di navigazione.
La griglia, d'altra parte, brilla di più quando devi posizionare con precisione elementi rispetto ad altri (sia in orizzontale che in verticale) e questo posizionamento è necessario per adattarsi facilmente alle varie dimensioni dello schermo.
Per dimostrare, ecco il codice che dovresti scrivere per ricreare il layout dall'esempio Grid con Flexbox.
L'HTML:
<classe div="contenitore">
<classe div="sotto uno">
<div>1</div>
<div>5</div>
</div><classe div="sub due">
<div>2</div>
</div>
<classe div="sotto tre">
<div>4</div>
<div>3</div>
</div>
</div>
Il CSS:
.contenitore {
bordo: 1px nero pieno;
altezza: 300px;
}.sub {
display: flessibile;
larghezza: 100%;
}.uno, .tre {
giustifica-contenuto: spazio-tra
}.due {
giustifica-contenuto: centro;
}
.sub > div {
altezza: 100px;
larghezza: 100px;
colore di sfondo: rosso;
colore bianco;
dimensione carattere: 5rem;
text-align: centro;
bordo-raggio: 5px;
}
Ed ecco l'output:
La cosa principale da notare qui è che mentre questo codice produce lo stesso output dell'esempio Grid, il markup qui è significativamente più complicato. L'implementazione di questo layout richiede sottocontenitori e devi posizionare i div numerati fuori ordine nel markup.
Inoltre, supponi di dover spostare questo layout in una posizione scomoda: diciamo allineando il 5° div con il 2°. Se avessi usato Flexbox per questo, dovresti ricorrere a posizione: relativa o qualcosa di simile. Usando Grid, tutto ciò di cui hai bisogno è spostare il file griglia-colonna proprietà.
Ma, al contrario, l'implementazione del semplice allineamento a riga singola dell'esempio Flexbox con Grid risulterebbe in molti più CSS. La griglia è ovviamente meno adatta per quel tipo di layout.
Mentre Flexbox e Grid possono replicare principalmente gli effetti l'uno dell'altro, ci sono alcune eccezioni. Fare in modo che gli elementi si sovrappongano è piuttosto difficile solo con Flexbox, ma è molto facile con Grid. La griglia inoltre non consente agli elementi di allontanarsi da altri elementi con margine: auto come fa Flexbox.
Flexbox e Grid sono potenti sistemi di layout
Flexbox e CSS Grid sono entrambi sistemi di progettazione che semplificano il layout dei contenuti della tua pagina web. La griglia è l'ideale per i layout bidimensionali con molti elementi che devono essere posizionati con precisione l'uno rispetto all'altro. Flexbox è migliore per i layout unidimensionali o a riga singola in cui devi solo distanziare un gruppo di elementi in un certo modo.
