Cassetta flessibile CSS n. 1. Creazione del tuo primo layout Flexbox

A fine 2018 abbiamo pubblicato un libro su CSS Grid, lo strumento di layout che sta rivoluzionando il web-design frontend. CSS Grid è interamente nativo di CSS e consente di creare un sistema di layout basato su griglia, utilizzando colonne e righe.

"CSS Grid Explained" è diventato immediatamente uno dei nostri libri più venduti. Quindi stiamo lavorando a un grande aggiornamento ed espansione per quel libro. Stiamo anche iniziando a produrre un nuovo libro, "Flexbox Explained". Flexbox è strettamente correlato a CSS Grid, ma ci sono differenze evidenti:

• Flexbox è un modello di layout unidimensionale. Può gestire sia colonne che righe.
• CSS Grid è un modello di layout bidimensionale. Può gestire sia colonne che righe.

Nelle prossime settimane pubblicheremo una serie di tutorial Flexbox mentre scriviamo "Flexbox Explained". Questo primo tutorial mostra i concetti di base di CSS Flexbox con esempi pratici.

Introduzione a Flexbox

La specifica CSS Flexbox descrive un layout con elementi ( flex-items ) all'interno di un contenitore ( flex-container ). Questi articoli possono crescere o ridursi in larghezza e/o altezza, in base allo spazio disponibile del contenitore. Gli articoli "flettono" per adattarsi al meglio al contenitore genitore.

Questi elementi "flessibili" possono essere disposti in qualsiasi direzione (asse in linea o asse del blocco), fornendo così molta flessibilità quando si cambia la dimensione (larghezza o altezza) dello schermo o il suo orientamento.

Puoi dare un'occhiata alle specifiche Flexbox W3C facendo clic su questo link.

Passo 1. Crea l'HTML

Iniziamo questo esempio creando un file HTML con del codice di esempio. Ho preparato del codice HTML per te: è un contenitore con 3 elementi figlio.

• Apri il tuo editor di codice preferito.
• Crea un file HTML vuoto.
• Visita questa pagina e copia il codice HTML
• Incolla quel codice nel tuo file HTML.

Passo 2. Crea il CSS

Ora che abbiamo un contenitore con 3 elementi, aggiungiamo un po' di stile.

• Crea un file CSS chiamato style.css. . Metti questo file nella stessa cartella del tuo file HTML. Il collegamento a questo file CSS è già nel tag del tuo file HTML
• Copia e incolla questo codice, disponibile anche su Codepen:

 /* GLOBAL STYLES */ * { box-sizing: border-box; } body { background-color: #AAA; margin: 0px 50px 50px; } .item { padding: 2rem; border: 5px solid #87b5ff; border-radius: 3px; font-size: 2em; font-family: sans-serif; font-weight: bold; background-color: #1c57b5; }

Questa immagine mostra come apparirà il tuo codice quando apri il file HTML in un browser. I 3 elementi figlio sono larghi quanto il loro contenitore principale. L'altezza è determinata dal contenuto di ogni articolo. Notare il riempimento di 2rem (circa 32px su uno schermo desktop) su tutti i lati.

Passaggio 3. Gli stili CSS Flexbox

Ora è il momento di avviare la parte Flexbox di questo tutorial.

• Modifica il file CSS e aggiungi questo codice:

 .container { display: flex; }

Questa immagine mostra come apparirà il tuo codice ora:

Cosa è cambiato? Dal punto di vista tecnico, il contenitore principale è ora un flex-container . Gli elementi figlio si sono trasformati in elementi flex-items .

Perché è cambiata la dimensione dei contenitori? Gli elementi flessibili non sono larghi quanto il loro contenitore principale. Ora sono ampi quanto il contenuto al loro interno. Gli flex-items visualizzati come elementi mobili a sinistra. Si comportano come elementi in linea .

Per vedere chiaramente la larghezza del contenitore principale, puoi applicare un background-color :

• Modifica il codice CSS e aggiungi questo codice:

 .container { display: flex; background-color: #f5ca3c; }

Ecco come appare ora il contenitore:

Hai già notato che il flex-container si comporta (per lo più) come un elemento a livello di blocco. Tuttavia, facciamo anche in modo che il contenitore si comporti come un elemento a livello di linea. Per fare ciò, cambiamo il valore della proprietà display in inline-flex .

• Modifica il codice CSS:

 .container { display: inline-flex; background-color: #f5ca3c;

Il contenitore flessibile è ora un elemento a livello di linea, come puoi vedere in questa immagine:

Prima di continuare in questo tutorial, cambiamo il comportamento in un elemento a livello di blocco.

• Modifica il codice CSS:

 .container { display: flex; background-color: #f5ca3c; flex-direction: row-reverse; }

Passaggio 4. Modifica delle righe Flexbox in colonne

Finora abbiamo creato un flex-container . Abbiamo anche visto come si comportano i figli di questo contenitore quando vengono trasformati in flex-items .

Ora impariamo come cambiare la direzione del nostro layout. La direzione predefinita di un flex-container è basata su righe. Tuttavia, puoi modificare questo comportamento con la proprietà flex-direction .

• Modifica il codice CSS:

 .container { display: flex; background-color: #f5ca3c; flex-direction: row; }

Dopo aver aggiornato il codice, non vedrai alcuna modifica perché flex-direction: row è il valore predefinito. Facciamo una modifica davvero visibile: modifica la direzione del flex-container in column .

• Modifica il codice CSS:

 .container { display: flex; background-color: #f5ca3c; flex-direction: column; }

Questa immagine successiva mostra la modifica nel layout:

Ora la direzione del flex-container si basa sull'asse del blocco (colonna). Gli flex-items sono allineati dall'alto verso il basso e ognuno di questi elementi occupa l'intera larghezza del contenitore principale. Quindi, si comportano come elementi di blocco.

A questo punto, potresti iniziare a mettere in discussione le cose: " Ehi, il mio layout ora sembra esattamente lo stesso del primo layout in questo tutorial! " È vero. Visivamente, non c'è differenza tra questo layout corrente con un flex-container e il primo layout di questo esempio con un contenitore a blocchi.

Tuttavia, ora abbiamo un maggiore controllo. Ad esempio, puoi invertire la direzione degli flex-items con le proprietà row-reverse e column-reverse .

• Modifica il codice CSS:

 .container { display: flex; background-color: #f5ca3c; flex-direction: column-reverse; }

Questa immagine mostra come apparirà il tuo layout dopo questo nuovo aggiornamento:

Per vedere gli flex-items invertiti in una riga, cambia il valore della proprietà flex-direction .

• Modifica il codice CSS:

 .container { display: flex; background-color: #f5ca3c; flex-direction: row-reverse; }

Riepilogo Flexbox

Congratulazioni! Hai imparato a dichiarare un flex-container . Hai visto come si comportano gli flex-items seconda della flex-direction applicata al loro contenitore padre ( row o column ). Inoltre sai come invertire l'ordine degli flex-items .

Tutte queste modifiche vengono eseguite con CSS, quindi non influiranno sulla struttura del markup HTML del tuo sito. Questo è uno dei vantaggi dell'utilizzo di Flexbox. L'inversione dell'ordine degli flex-items è solo una delle caratteristiche di questo modulo CSS. C'è molto altro da imparare su Flexbox, quindi dai un'occhiata alla Parte #2 di questo tutorial tra qualche giorno.

Altri tutorial di questa serie

• Cassetta flessibile CSS n. 2. Come utilizzare la proprietà justify-content
• Cassetta flessibile CSS n. 3. La proprietà align-items
• Cassetta flessibile CSS n. 4. La proprietà a crescita flessibile