• seguici su feed rss
  • seguici su twitter
  • seguici su linkedin
  • seguici su facebook
  • cerca

SEI GIA' REGISTRATO? EFFETTUA ADESSO IL LOGIN.



ricordami per 365 giorni

HAI DIMENTICATO LA PASSWORD? CLICCA QUI

NON SEI ANCORA REGISTRATO ? CLICCA QUI E REGISTRATI !

CSS flexbox: la guida completa, con esempi

di :: 14 ottobre 2020
CSS flexbox: la guida completa, con esempi

Il layout Flexbox (Box Flessibili) è un modo per gestire, allineare e distribuire lo spazio tra elementi contenuti all'interno di un elemento contenitore, anche nei casi in cui la dimensione degli elementi non sia nota a priori, e senza utilizzare delle media query. Flexbox è alla base di Bootstrap, noto framework utilizzato per lo sviluppo di interfacce e template HTML responsive.

Flexbox lavora con due assi:

  • l’asse principale: corre in senso orizzontale, da sinistra a destra
  • l’asse trasversale: corre in senso verticale dall’alto verso il basso.

Utilizzando questi assi gli elementi possono essere disposti, in relazione tra loro, all’interno del box contenitore. CSS Flexbox assicura che lo spazio tra questi elementi venga riempito in modo adeguato.

Come utilizzare il layout Flexbox

Il layout Flexbox funziona attribuendo ad un elemento contenitore "parent" (generalmente un "div") la capacità di modificare la lunghezza, larghezza o ordine dei suoi elementi "figli" secondo regole precise. Saranno gli elementi "figli" ad essere flessibili.

Ad esempio, possiamo decidere di allinearli da sinistra verso destra, o da destra verso sinistra, o di centrarli nel div contenitore, o di espanderli fino a riempire tutto lo spazio disponibile oppure restringerli in modo tale da prevenire l'overflow, ...

La struttura di un layout Flexbox

Facciamo subito un esempio. Creiamo un file html ("esempio.html") con all'interno il seguente codice.

<!doctype html>
<html lang="it">
   <head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<style>
	body {
	    background-color:#ffffff;
	    color:#000000;
	}
	.container { 
	  background-color: #cccccc;
	}
	.child {
	   margin:15px;
	   padding:50px;
	   background-color:#ff0000;
	   text-align: center;
	}
	</style>
	<title>Esempio flexbox</title>
   </head>
   <body>
	<div class="container">
		<div class="child" id="box1">Box 1</div>
		<div class="child" id="box2">Box 2</div>
		<div class="child" id="box3">Box 3</div>
	</div>
   </body>
</html>

Nell'html il nostro focus sarà sul contenitore "div", con classe "container", che contiene tre "div".

Prova ad testare questa pagina web, e vedrai il risultato: i tre div si presentano uno sotto l'altro

layout senza flexbox

Adesso applichiamo un modello Flexbox a questa struttura aggiungendo la classe "container" a cui assegnamo una proprietà "display" con valore "flex".

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

Riapri la pagina web e vedrai i tre div "figli" affiancati in orizzontale, all'interno del div "contenitore".

flex-direction: row

Adesso vediamo come trasformare questa struttara in Flebox, attraverso l'utilizzo di una serie di proprietà da applicare al div "container".

flex-direction

Per affiancare questi div in orizzontale, da sinistra verso destra, cioè come indicati nel codice html, si utilizza la proprietà "flex-direction" con valore "row", come indicato nel nostro css, ed è il comportamento di default di una Flexbox, per cui anche omettendolo il risultato sarebbe stato il medesimo.

Se vogliamo affiancarli da destra verso sinistra, quindi ribaltandone l'ordine, utilizziamo il valore "row-reverse". L'ordine sarà quindi inverso rispetto a quello indicato nel codice html.

flex-direction: row-reverse

E' possibile anche allineare i div in verticale, dall'alto verso il basso, con il valore "column"

layout senza flexbox

e dal basso verso l'alto con "column-reverse", per cui il primo elemento è in basso.

flex-direction: column-reverse

Ricapitolando, i possibili valori di flex-direction sono:

  • row: da sinistra verso destra (default)
  • row-reverse: da destra verso sinistra
  • column: dall'altro verso il basso
  • column-reverse: dal basso verso l'alto

justify-content

La proprietà "justify-content" serve a definire come allineare gli elementi "child" sull’asse principale del contenitore, cioè sull'asse orizzontale.

Per centrare i 3 elementi utilizziamo il valore center

 .container { 
  display: flex;
  flex-direction: row;
  background-color: #cccccc;
  justify-content:center;
}

Ecco il risultato

justify-content:center

Per allineare i "child" sul lato sinistro si utilizza flex-start

flex-direction: row

Per allineare i "child" sul lato destro si utilizza flex-end

justify-content:flex-end

Per distribuire equamente i "child" nel "container", con la stessa spaziatura tra loro, si utilizza space-around

justify-content:space-around

Per distribuire i "child" in modo uniforme, con il primo child posizionato all’inizio del "container" e l’ultimo alla fine del "container", si utilizza space-between

justify-content:space-between

Ricapitolando, i possibili valori di flex-direction sono:

  • center: posiziona i child centralmente sull’asse orizzontale, come visto nell'esempio precedente
  • flex-start: posiziona i child sul lato sinistro
  • flex-end: posiziona i child sul lato destro
  • space-around: tutti e tre i child sono distribuiti equamente e con la stessa spaziatura tra uno e l’altro, cioè lo spazio intorno ai child è distribuito in modo uniforme
  • space-between: lo spazio tra i child è distribuito in modo uniforme, con il primo child è posizionato all’inizio del "container" e l’ultimo alla fine del "container" cioè sul lato destro

align-items

Mentre proprietà "justify-content" serve a definire come allineare gli elementi "child" sull’asse principale del contenitore, cioè sull'asse orizzontale, "align-content" lavora in modo simile ma sull'asse verticale.

La proprietà "align-items" serve a stabilire come allineare i child sull’asse trasversale del contenitore, quindi in verticale.

Cominciamo con il dare una altezza al div contenitore (400px), inoltre variamo l'altezza dei vari "child", così da capire l'impatto di questo tipo di allineamento, ed utilizziamo la proprietà "align-items" con valore "center" per centrare verticalmente gli elementi "child" rispetto al contenitore

.container {
  display: flex;
  flex-direction: row;
  background-color: #cccccc;
  height:400px;
  justify-content:center;
  align-items: center;
}

#box1{padding:20px 50px;}
#box2{padding:50px 50px;}
#box3{padding:35px 50px;}

Ecco il risultato, in cui evidenziamo la linea rispetto alla quale vengono allineati i "child"

align-items: center

Per posizionare i "child" vicino al lato superiore del "container" utilizziamo flex-start

align-items: flex-start

Per posizionare i "child" vicino al lato inferiore del "container" utilizziamo flex-end

align-items: flex-end

Se vogliamo che i "child" occupino tutta l’altezza del "container" utilizziamo stretch

align-items: stretch

Se vogliamo che i "child" vengano allineati rispetto alla baseline del loro testo, utilizziamo baseline

align-items: baseline

Ricapitolando i possibili valori per gestire l’allineamento verticale:

  • center: i "child" sono posizionati centralmente sull’asse verticale
  • flex-start: i "child" sono posizionati tutti vicino al lato superiore del "container"
  • flex-end: i "child" sono posizionati tutti vicino al lato inferiore del "container"
  • stretch: i "child" occupano tutta l’altezza del "container"
  • baseline: i "child" sono allineati sulla linea di base del testo contenuto in essi

Nota: Se il "container" dispone di un valore "height", allora il valore di default è "flex-start", altrimenti è "stretch".

flex-wrap

Questa proprietà specifica se i "child" devono essere disposti su un’unica riga oppure su più righe.

Per capire questo concetto cambiamo esempio ed aggiungiamo qualche elemento "child" al nostro html:

<div class="container">
	<div class="child box1">1</div>
	<div class="child box2">2</div>
	<div class="child box3">3</div>
	<div class="child box4">4</div>
	<div class="child box5">5</div>
	<div class="child box6">6</div>
</div>

Modifichiamo anche lo stile in questo modo

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

.child{
  font-size:25px;
  text-align:center;
  padding:15px;
  width:40%;
}

.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}

Normalmente, quando i "child" occupano più dello spazio consentito dalla schermata, quelli in eccesso andranno automaticamente su una nuova riga: con flexbox possiamo cambiare questa regola.

Assegnando, come in questo esempio, a flex-wrap il valore nowrap, gli elementi resteranno sulla stessa riga

flex-wrap: nowrap

Il valore di default è wrap, che manda a capo gli elementi che non stanno sulla riga

flex-wrap: wrap

Mentre con wrap-reverse, la disposizione degli elementi avviene dal basso verso l'alto

flex-wrap: wrap-reverse

Ricapitolando, i possibili valori della proprietà "flex-wrap" sono:

  • nowrap: per non mandare nessun elemento del parent su un’altra riga
  • wrap: per mandare a capo gli elementi che non ci stanno sulla stessa riga
  • wrap-reverse: la disposizione degli elementi avviene dal basso verso l’alto

NOTA: è possibile utilizzare la proprietà flex-flow come sintesi abbreviata per indicare allo stesso tempo flex-direction e flex-wrap.

align-content

Se il "container" ha "child" disposti su più righe (quando "flex-wrap: wrap"), la proprietà "align-content" definisce l'allineamento di ogni riga del "container". Quindi il focus non è sui "child" ma sulle righe.

Utilizziamo il valore center se vogliamo che tutte le righe si posizionino al centro del contenitore.

Modifichiamo l'esempio precedente, modificando lo stile del "container" in questo modo

.container{
   background-color: #cccccc;
   display:flex;
   height:400px;
   flex-wrap:wrap;
   align-content:center;
}

Ecco il risultato

align-content:center

Utilizzando il valore flex-start, tutte le righe vengono posizionate all'inizio del "container".

align-content: flex-start

Utilizzando il valore flex-end, le righe vengono posizionate alla fine del "container".

align-content: flex-end

Utilizzando il valore stretch le righe si allungheranno fino a riempire tutto lo spazio rimanente.

align-content: stretch

Utilizzando il valore space-around le righe avranno la stessa spaziatura (comprese la prima e l'ultima riga).

align-content: space-around

Infine, utilizzando il valore space-between distribuiamo le righe in modo uniforme con la prima riga posizionata all’inizio del "container" e l’ultima alla fine del "container".

align-content: space-between

Ricapitolando, align-content può assumere i seguenti valori

  • center: tutte le righe si posizionano al centro del "container"
  • flex-start: tutte le righe vengono posizionate all'inizio del "container"
  • flex-end: le righe vengono posizionate alla fine del "container".
  • stretch: le righe si allungheranno fino a riempire tutto lo spazio rimanente.
  • space-around: le righe avranno la stessa spaziatura (comprese la prima e l'ultima riga).
  • space-between: distribuiamo le righe in modo uniforme con la prima riga posizionata all’inizio del "container" e l’ultima alla fine del "container".

Fino ad adesso abbiamo visto proprietà da applicare al div "container". Adesso passiamo ad alcune proprietà da applicare agli elmenti "child".

order

Con la proprietà order possiamo modificare l'ordine in cui verranno visualizzati i div "child" rispetto al "container" padre.

Ripartiamo da un esempio con quattro "child " in cui vogliamo che il box1 venga visualizzato come secondo elemento, il box 2 come quarto, il box 3 come primo, e il box 4 come terzo:

<!doctype html>
<html lang="it">
   <head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>Esempio flexbox</title>
	<style>
	body {
	    background-color:#ffffff;
	    color:#000000;
	}
	 .container { 
	  display: flex;
	  flex-direction: row;
	  background-color: #cccccc;
	}
	.child {
	   margin:15px;
	   font-size:2em;
	   background-color:#ff0000;
	   text-align: center;
	}
	#box1 {order:2;}
	#box2 {order:4;}
	#box3 {order:1;}
	#box4 {order:3;}
	</style>
   </head>
   <body>
	<div class="container">
	   <div class="child" id="box1">Box 1</div>
	   <div class="child" id="box2">Box 2</div>
	   <div class="child" id="box3">Box 3</div>
	   <div class="child" id="box4">Box 4</div>
	</div>
	</div>
   </body>
</html>

Ecco il risultato

order

Di default la proprietà order ha valore 0.

flex-grow

Come possiamo vedere nell'esempio precedente, tolti i margini impostati ai vari "child", esiste dello spazio vuoto in eccesso nel "container".

La proprietà flex-grow consente di impostare il fattore di ingrandimento (di crescita) di un elemento "child" rispetto agli altri, in modo da riempire tutto lo spazio in eccesso, ed ammette un valore numerico (non negativo).

Se, ad esempio, vogliamo che il child "box1" abbia un fattore di crescita del doppio rispetto agli altri child, utilizziamo la proprietà flex-grow con valore 2.

#box2 {flex-grow:2;}

flex-grow:2

Se vogliamo che tutti gli elementi abbiano lo stesso fattore di crescita utilizziamo, per tutti, un flex-grow con valore 1

#box1{flex-grow:1;}
#box2{flex-grow:1;}
#box3{flex-grow:1;}
#box4{flex-grow:1;}

oppure semplicemente

.child{flex-grow:1;}

flex-grow:1

Il valore di default è 0

flex-basis

Con flex-grow abbiamo visto come definire un fattore di ingrandimento di un elemento "child" (o più elementi) rispetto agli altri, in modo da riempire tutto lo spazio in eccesso. In questo modo i child si dimensionano in "automatico" .

E' tuttavia possibile impostare manualmente le dimensioni di un "child" utilizzando la proprietà flex-basis. Ad esempio, togliamo il flex-grow a tutti i child ed definiamo che ognuno di essi occupi il 25% dello spazio disponibile nel "container".

.child {
   margin:15px;
   padding:50px;
   background-color:#ff0000;
   text-align: center;
   flex-basis:25%
}

Questo è il risultato

flex-basis: 25%

Si possono indicare valori in percentuale, come nel nostro esempio, oppure un valore numerico.

Vediamo di combinare assieme l'utilizzo di flex-basis e flex-grow. Impostiamo a tutti i child un flex-basis del 20%, ed assegnamo al box2 un flex-grow con valore 2

.child {
	margin:15px;
	font-size:2em;
	background-color:#ff0000;
	text-align: center;
	flex-basis:20%
}

#box2{flex-grow: 2;}

In questo caso il flex-grow è sì il fattore di crescita rispetto agli altri elementi, ma prendendo come riferimento il valore impostato per la proprietà flex-basis, ed il risultato sarà il seguente

flex-basis e flex-grow

Nota: Il valore di flex-basis default è auto e divide lo spazio tra i vari elementi sulla base della proprietà "flex-grow".

Nota: nel caso in cui è impostato "flex-direction:row", oppure se non è specificato nulla, la lunghezza si riferisce alla larghezza (width), altrimenti se è impostato "flex-direction:column" allora la lunghezza si riferisce all’altezza (height).

flex-shrink

Funziona allo stesso modo di flex-grow ma impostando il fattore di riduzione, e definisce come devono restringersi i "child" quando non c'è abbastanza spazio nel "container". Ammette un valore numerico (non negativo).

Di default il suo valore è 1 e fa si che i child vengano equamente distribuiti nello spazio ("container") disponibile. Il valore di default è 1

Se ad esempio un elemento ha la proprietà flex-shrink impostata a 2 allora verrà ridotto il doppio rispetto a quello con flex-shrink uguale a 1.

Vediamo questo esempio

<!doctype html>
<html lang="it">
   <head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>Esempio flexbox</title>
	<style>
	body {
	    background-color:#ffffff;
	    color:#000000;
	}
	.container {
		width:100%;
		max-width: 960px;
		background-color:#cccccc;
		font-size: 32px;
		display: flex;
		flex-direction: row;
		}
	.child {
		width:320px;  
		text-align:center;
		padding:20px;
	}
	#box1{background-color:red; flex-shrink:1;}
	#box2{background-color:blue; flex-shrink:2;}
	#box3{background-color:green; flex-shrink:3;}

	</style>
   </head>
   <body>
	<div class="container">
	   <div class="child" id="box1">Box 1</div>
	   <div class="child" id="box2">Box 2</div>
	   <div class="child" id="box3">Box 3</div>
	</div>
	</div>
   </body>
</html>

Aprite questo esempio nel vostro browser e poi.... riducete lo schermo e vedrete come i tre box di riducono in modo differente.

flex-shrink

flex

Questa proprietà è semplicemente un modo compatto per indicare in un’unica regola i valori per "flex-grow", "flex-shrink" e "flex-basis", dove il secondo e terzo paramtero sono opzionali e i valori default sono 0, 1 e auto.

align-self

Questa proprietà consente di specificare, per un singolo "child" l’allineamento sull’asse trasversale, cioè in verticale. In definitiva questa proprietà sostituisce l’allineamento impostato dalla proprietà "align-items" impostato nel "container", se presente. Ammette i seguenti valori: flex-start, flex-end, center, baseline, stretch.

Ecco un esempio

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
.container {
  display: flex;
  flex-direction: row;
  background-color: #cccccc;
  height:400px;
}
.child {
  margin:15px;
  padding:50px;
  background-color:#ff0000;
  text-align: center;
  font-size:25px;
}
#box1 {align-self: flex-start;}
#box2 {align-self: flex-end;}
#box3 {align-self: center;}
#box4 {align-self: baseline;}
#box5 {align-self: stretch;}
</style>
</head>
<body>
    <div class="container">
        <div class="child" id="box1">1</div>
        <div class="child" id="box2">2</div>
        <div class="child" id="box3">3</div>
        <div class="child" id="box4">4</div>
        <div class="child" id="box5">5</div>
    </div>
</body>
</html>

Ecco il risultato

align-self

Abbiamo così concluso la lunga spiegazione relativa all'ultizzo di Flexbox. Solo con molta pratica riuscirete ad impadronirvi di questo strumento.

 
pay per script

Hai bisogno di uno script PHP personalizzato, di una particolare configurazione su Linux, di una gestione dei tuoi server Linux, o di una consulenza per il tuo progetto?

 
 
 
x

ATTENZIONE