Un sito da zero

Impariamo ad usare "FLEX"

Sommario:
Questa pagina è un completamento della guida Come creare un sito da zero

Flex (flexbox) è semplicemente bellissimo. Tutti i web designer lo amano, perchè semplifica la creazione di pagine responsive. È un tipo di layout che permette ad un contenitore padre di modificare la lunghezza, la larghezza e l'ordinamento dei suoi elementi figli. Gli elementi figli, quindi, a seconda delle impostazioni date, si disporranno in modo differente per riempire lo spazio del contenitore padre e tale disposizione sarà flessibile, cioè si allargherà e restringerà secondo la larghezza dello schermo.
Il contenitore padre può, a sua volta, contenere altri contenitori padri con altri elementi figli ecc.
È anche possibile accostare elementi fissi ad elementi flessibili impostando una larghezza stabilita.
Negli esempi utilizzo dei div per gli elementi figli, ma possono essere usati altri elementi contenitori, o immagini.

NOTA: non dimenticare di applicare i vendor prefixes alle regole di stile https://autoprefixer.github.io/

Le basi

Credo che il modo migliore per capirne bene il funzionamento sia utilizzare degli esempi.
Lo schema di base, per un padre con 3 figli è questo:
<style>
.padre {
display:flex;
}
</style>

<div class="padre">
<div class="figlio1"></div>
<div class="figlio2"></div>
<div class="figlio3"></div>
</div>

Riporto lo stesso codice completato con le regole di stile utilizzate per il primo esempio di base.

<style>
.padre {
  display: flex;
  border: 2px solid #f86f0b;
  max-width: 300px;
  padding: 1px;
}
.figli {
  padding: 5px;
  max-width: 40px;
  text-align: center;
}
.uno {
  background-color: #a1ea93;
}
.due {
  background-color: #f4f474;
}
.tre {
  background-color: #84dff2;
}
</style>

<div class="padre">
<div class="figli uno">A</div>
<div class="figli due">B</div>
<div class="figli tre">C</div>                   
</div>

Abbiamo creato un contenitore padre con regola "display:flex" e 3 contenitori figli con lo stesso contenuto. Il risultato saranno tre colonne allineate a sinistra, con stessa larghezza e stessa altezza.

Esempio 1 (base):
A
B
C

Mettendo un contenuto maggiore in uno o più dei box figli, essi adatteranno la loro dimensione al contenuto.

Esempio 2:
AA
A
B
CCC

Ci sono regole per il contenitore padre e regole per i contenitori figli.

Regole applicabili al contenitore padre

Esempi di regole applicate al contenitore padre

flex-direction: row (default)
A
B
C
Gli elementi sono nel loro ordine.

flex-direction: row-reverse
A
B
C
Gli elementi invertono il loro ordine.

flex-direction: column
A
B
C
Gli elementi vengono incolonnati.

flex-direction: column-reverse
A
B
C
Gli elementi incolonnati invertono il loro ordine.

flex-wrap: wrap
A
B
C
D
E
F
G
H
I
L
M
N
O
P
Q
R
S
T
U
V
Z
Gli elementi possono essere separati e andare su una nuova linea se la larghezza del contenitore non è sufficiente a contenerli.

Il valore di default è nowrap. Nel caso dell'esempio, se lasciato tale valore, il risultato, senza modificare la larghezza massima del contenitore, sarebbe questo:
flex 1
Il contenuto, cioè, esce dal contenitore.

flex-wrap: wrap-reverse
A
B
C
D
E
F
G
H
I
L
M
N
O
P
Q
R
S
T
U
V
Z
Le righe in cui sono stati disposti gli elementi si invertono.

justify-content: flex-start (default)
A
B
C
Gli elementi si allineano all'inizio (sinistra) del contenitore se non ne occupano tutto lo spazio.

justify-content: flex-end
A
B
C
Gli elementi si allineano alla fine (destra) del contenitore se non ne occupano tutto lo spazio.

justify-content: center
A
B
C
Gli elementi si allineano al centro del contenitore se non ne occupano tutto lo spazio.

justify-content: space-between
A
B
C
Gli elementi vengono disposti ad occupare tutto il contenitore, ponendo uno spazio tra uno e l'altro se non ne occupano tutto lo spazio.

justify-content: space-around
A
B
C
Gli elementi vengono disposti ad occupare tutto il contenitore, ponendo uno spazio intorno ad ognuno se non ne occupano tutto lo spazio.

align-items: stretch (default)
A
A
B
C
C
C
Gli elementi occupano tutta l'altezza impostata del contenitore.

align-items: flex-start
A
A
B
C
C
C
Gli elementi regolano la propria altezza in base al contenuto e sono allineati al margine superiore del contenitore.

align-items: flex-end
A
A
B
C
C
C
Gli elementi regolano la propria altezza in base al contenuto e sono allineati al margine inferiore del contenitore.

align-items: center
A
A
B
C
C
C
Gli elementi regolano la propria altezza in base al contenuto e sono allineati al centro rispetto all'altezza del contenitore.

align-items: baseline
A
b
C
Gli elementi si dispongono secondo la linea di base del loro contenuto, quale che sia la loro altezza.

align-content: stretch (default)
A
B
C
D
E
F
G
H
I
L
M
N
O
P
Q
R
S
T
U
V
Z
Le righe del blocco di elementi si allungano per occupare tutta l'altezza impostata del contenitore.
NOTA: la proprietà "align-content" ha effetto solo su blocchi di elementi distribuiti su più righe. Negli esempi è stata, quindi, associata alla proprietà "flex-wrap: wrap".

align-content: flex-start
A
B
C
D
E
F
G
H
I
L
M
N
O
P
Q
R
S
T
U
V
Z
Il blocco di elementi si allinea al margine superiore del contenitore.

align-content: flex-end
A
B
C
D
E
F
G
H
I
L
M
N
O
P
Q
R
S
T
U
V
Z
Il blocco di elementi si allinea al margine inferiore del contenitore.

align-content: center
A
B
C
D
E
F
G
H
I
L
M
N
O
P
Q
R
S
T
U
V
Z
Il blocco di elementi si allinea verticalmente al centro del contenitore.

align-content: space-between
A
B
C
D
E
F
G
H
I
L
M
N
O
P
Q
R
S
T
U
V
Z
Se lo spazio in altezza del contenitore non viene riempito completamente dal blocco degli elementi, le righe vengono distanziate tra di loro per colmare tutto lo spazio fino al margine superiore e inferiore.
(Se le righe fossero più di due, le righe centrali sarebbero disposte ad uguale distanza tra di loro e dalle righe superiore e inferiore)

align-content: space-around
A
B
C
D
E
F
G
H
I
L
M
N
O
P
Q
R
S
T
U
V
Z
Se lo spazio in altezza del contenitore non viene riempito completamente dal blocco degli elementi, sopra e sotto alle righe viene posto il margine necessario a distribuirle in modo omogeneo fino a colmare l'altezza.

Regole applicabili agli elementi figli

NOTA: le regole per gli elementi figli, se applicate al contenitore padre, stabiliscono impostazioni comuni per tutti gli elementi figli. Tali regole possono, comunque, essere sovrascritte se applicate direttamente ad ogni singolo elemento figlio.

Esempi di regole applicate agli elementi figli

order:1/2/3 ecc...(default 0)
A
B
C
D
Gli elementi si dispongo secondo le regole di ordine impostate. In questo caso, ho impostato "order:1" all'elemento B e "order:2" all'elemento A. Gli elementi senza ordine stabilito appaiono a sinistra di quelli con ordine impostato.

flex-grow: 1 / 2 / 3 / 4 ecc...(default 0)
A
B
C
D
Fattore di crescita proporzionale. Se la larghezza del contenitore padre aumenta, gli elementi si allargano mantenendo sempre la proporzione stabilita dal valore impostato. Maggiore è il valore e maggiore è la crescita.
Nell'esempio ho impostato "flex-grow:1" per gli elementi A e C, ho impostato "flex-grow:2" per l'elemento B e "flex-grow:3" per l'elemento D.
Naturalmente, gli elementi non devono avere una larghezza fissa, o massima stabilita.

flex-shrink: 1 / 2 / 3 / 4 ecc...(default 1)
A
B
C
D
Fattore di restringimento proporzionale. Se la larghezza totale degli elementi è maggiore della larghezza del contenitore padre, gli elementi si restringono mantenendo sempre la proporzione stabilita dal valore impostato, fino a quanto concesso da eventuali altre regole di padding o margin. Maggiore è il valore e maggiore è il restringimento.
Nell'esempio, il contenitore padre ha larghezza massima impostata di 600px. Gli elementi figli hanno una larghezza impostata di 400px e il flex-shrink impostato, da A a D, sui valori 2, 3, 4, 5.
Naturalmente, gli elementi non devono avere una larghezza fissa, o massima stabilita

flex-basis: ..px (default auto)
A
B
C
C
Specifica la larghezza iniziale, in pixel, di un elemento figlio. In base a questa larghezza, la flessibilità degli elementi sarà proporzionale.
Nell'esempio, gli elementi figli hanno flex-basis rispettivamente di 40px, 100px, 60px, 20px.
Naturalmente, gli elementi non devono avere una larghezza fissa, o massima, diversamente stabilita

E adesso?

Adesso non resta che giocarci un po'. Mettendo insieme e incrociando le regole del contenitore padre e degli elementi figli, provando e riprovando si possono scoprire tutte le possibilità date da flex, che sono davvero tante e la cosa bella è che flex è supportato da tutti i browser (vedi: https://caniuse.com/#feat=flexbox)
Moltissime le possibilità di applicazione: layout per siti web, gallerie di immagini, box vari, griglie. Sbizzarritevi.

Centrare testo in div

Con flex è possibile centrare perfettamente del testo in un div.
Esempio:
<style>
div {
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
}
</style>
<div>
<p>Testo</p>
</div>

Esempio di griglia

Con flex potete creare delle griglie senza usare il layout "grid". Il vantaggio è la maggiore compatibilità con i browser.
Ecco un esempio di griglia creata con flex, che potete scaricare.

Anteprima e download
griglia
Fammi sapere se questo argomento ti è stato utile.
Se non lo è stato, puoi inviarmi le tue osservazioni. Grazie 
Elenco argomenti di questa guida:
Altro di interesse

Leggi anche: Un sito già pronto per te