La Guida Definitiva a Flexbox
Inizia a usare CSS Flexbox. Questa guida copre tutte le aree principali di Flexbox con esempi e consigli pratici.
Panoramica
Il layout Flexbox, ufficialmente riconosciuto come CSS Flexible Box Layout Module, è un modello di layout in CSS.
Flexbox è un layout monodimensionale, il che significa che dispone gli elementi in una sola dimensione alla volta, o come riga o come colonna, ma non entrambe insieme. Questo si contrappone al modello bidimensionale — CSS Grid Layout, che dispone gli elementi in due dimensioni contemporaneamente (righe e colonne insieme).
Flexbox è stato introdotto come alternativa ai Float CSS per definire l'aspetto generale di una pagina web. Flexbox offre molti vantaggi; in particolare, con esso è possibile controllare l'allineamento, la direzione, l'ordine e la dimensione degli elementi.
Gli elementi all'interno di un flex container:
- possono essere organizzati in qualsiasi direzione (a sinistra, a destra, verso il basso o persino verso l'alto) (flex-direction).
- possono avere ordine diretto (da sinistra a destra) o inverso (da destra a sinistra).
- possono avere larghezza e altezza "flex" per riempire lo spazio disponibile (flex-item).
- possono essere impostati per comprimersi o espandersi dinamicamente lungo l'asse principale, preservando nel frattempo la dimensione dell'asse trasversale secondario.
- possono essere organizzati linearmente lungo l'asse principale o distribuiti su più righe lungo o attraverso l'asse trasversale.
Flexbox è relativamente recente, ma oggi gode di un eccellente supporto nei browser.
(Scopri di più sul supporto e la compatibilità dei browser).
Fondamenti di Flexbox
Quando si lavora con Flexbox bisogna ragionare in termini di due assi — l'asse principale e l'asse trasversale — e distinguere tra flex container e flex item.
Asse Principale e Asse Trasversale
Flexbox è un layout orientato a un singolo asse; ha un asse principale e un asse trasversale. Ciò significa che gli elementi vengono disposti lungo l'asse principale o lungo l'asse trasversale. L'asse trasversale è sempre perpendicolare a quello principale.
L'asse principale è definito dalla proprietà flex-direction, che può assumere i seguenti valori:
- row
- row-reverse
- column
- column-reverse
Se la proprietà flex-direction è specificata con i valori row o row-reverse, l'asse principale sarà orizzontale, cioè scorrerà lungo la riga nella direzione inline. L'asse trasversale scorrerà invece lungo le colonne.
Se la proprietà flex-direction è specificata con i valori column o column-reverse, l'asse principale sarà verticale, cioè scorrerà dall'alto verso il basso della pagina nella direzione block. L'asse trasversale, invece, scorrerà lungo le righe.
Guarda questa figura per comprendere meglio il concetto alla base degli assi di Flexbox.
- main axis - L'asse principale di un flex container è l'asse lungo il quale vengono disposti i flex item.
- main-start | main-end - I flex item vengono disposti all'interno del container a partire da main-start fino a main-end.
- main size - La larghezza o l'altezza di un flex item nella dimensione principale è la dimensione principale dell'elemento.
- cross axis - L'asse perpendicolare all'asse principale, la cui direzione dipende dalla direzione dell'asse principale (orizzontale o verticale).
- cross-start | cross-end - Le linee flex vengono riempite con gli elementi e inserite nel container partendo dal lato cross-start del flex container e procedendo verso il lato cross-end.
- cross size - La larghezza o l'altezza di un flex item nella dimensione trasversale è la dimensione trasversale dell'elemento.
Fonte: W3.org
Flex Container e Flex Item
Il flex container è un elemento genitore che raggruppa un insieme di elementi figli, i flex item. Nella maggior parte dei casi il container definisce il layout e la posizione dei suoi flex item; tuttavia, i flex item possono essere manipolati singolarmente.
Per trasformare un elemento HTML in un flex container occorre usare la proprietà display con i valori flex (flex container box a livello di blocco) o inline-flex (definisce una flex container box a livello inline). In caso contrario, il browser ignorerà tutte le proprietà Flexbox utilizzate.
Flexbox container
.container {
display: flex; /* or inline-flex*/
}Proprietà del Flex Container
La proprietà flex-direction
La proprietà flex-direction viene usata per creare layout a riga e a colonna. Specifica la direzione dell'asse principale del flex container e stabilisce l'ordine in cui appaiono gli elementi.
La proprietà flex-direction può assumere i seguenti valori:
- row - gli elementi vengono visualizzati lungo la riga da sinistra a destra.
- row-reverse - gli elementi vengono visualizzati da destra a sinistra.
- column - gli elementi vengono visualizzati verticalmente dall'alto verso il basso.
- column-reverse - gli elementi vengono visualizzati verticalmente dal basso verso l'alto.
Esempio della proprietà flex-direction:
Esempio della proprietà flex-direction
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h3 {
color: #8ebf42;
}
.flex-container {
display: flex;
flex-direction: row-reverse;
padding: 30px;
border: 1px dashed #666;
}
.flex-container > div {
width: 80px;
height: 70px;
margin: 5px;
border-radius: 3px;
background-color: #1faadb;
}
</style>
</head>
<body>
<h3>row-reverse</h3>
<div class="flex-container">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>Nel nostro esempio gli elementi sono organizzati in ordine inverso. Modifica i valori della proprietà flex-direction (row, column, column-reverse) per vedere come cambia l'aspetto degli elementi.
Nota: row e row-reverse dipendono dalla modalità di scrittura; in un contesto rtl (da destra a sinistra) verranno invertiti di conseguenza.
La proprietà flex-wrap
Per impostazione predefinita, tutti i flex item si adattano su una sola riga; se i flex item sono troppo larghi per il container, lo supereranno in overflow. Per evitare ciò occorre usare la proprietà flex-wrap per mandare a capo gli elementi.
La proprietà può accettare i seguenti valori:
- nowrap (predefinito) - i flex item vengono visualizzati su una sola riga; per impostazione predefinita si adattano alla larghezza del flex container.
- wrap - i flex item vengono visualizzati su più righe se necessario, da sinistra a destra e dall'alto verso il basso.
- wrap-reverse - i flex item vengono visualizzati su più righe se necessario, da sinistra a destra e dal basso verso l'alto.
Nota: La proprietà dipende dalla modalità di scrittura; in un contesto rtl (da destra a sinistra) i valori verranno invertiti di conseguenza.
La proprietà justify-content
La proprietà justify-content viene usata per definire l'allineamento orizzontale degli elementi lungo l'asse principale. Aiuta a distribuire lo spazio libero rimasto tra i flex item sull'asse principale.
I valori di justify-content sono i seguenti:
- flex-start (valore predefinito) - gli elementi vengono disposti all'inizio del container.
- flex-end - gli elementi vengono disposti alla fine del container.
- center - gli elementi vengono disposti al centro del container.
- space-between - gli elementi vengono distribuiti uniformemente nella riga (con spazio tra di loro); il primo elemento si trova all'inizio della riga, l'ultimo alla fine.
- space-around - gli elementi vengono visualizzati con spazio prima, tra e dopo di essi.
- space-evenly - gli elementi vengono distribuiti in modo che la spaziatura tra due qualsiasi elementi (e lo spazio verso i bordi) sia uguale.
Esempio della proprietà justify-content:
Esempi della proprietà justify-content
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
padding: 10px;
margin-bottom: 20px;
background-color: #1faadb;
}
.flex-start {
justify-content: flex-start;
}
.flex-end {
justify-content: flex-end;
}
.center {
justify-content: center;
}
.space-between {
justify-content: space-between;
}
.space-around {
justify-content: space-around;
}
.flex-container > div {
width: 28%;
height: 45px;
margin: 5px;
border-radius: 3px;
background-color: #8ebf42;
}
.flex-container > div.item-two {
width: 18%;
}
</style>
</head>
<body>
<p>flex-start</p>
<div class="flex-container flex-start">
<div></div>
<div class="item-two"></div>
<div></div>
</div>
<p>flex-end</p>
<div class="flex-container flex-end">
<div></div>
<div class="item-two"></div>
<div></div>
</div>
<p>center</p>
<div class="flex-container center">
<div></div>
<div class="item-two"></div>
<div></div>
</div>
<p>space-between</p>
<div class="flex-container space-between">
<div></div>
<div class="item-two"></div>
<div></div>
</div>
<p>space-around</p>
<div class="flex-container space-around">
<div></div>
<div class="item-two"></div>
<div></div>
</div>
</body>
</html>Modifica il valore della proprietà justify-content per vedere come vengono allineati gli elementi.
La proprietà align-items
La proprietà align-items viene usata per allineare gli elementi lungo l'asse trasversale. È l'opposto della proprietà justify-content, che allinea gli elementi lungo l'asse principale.
I valori di align-items sono i seguenti:
- stretch (predefinito) - gli elementi vengono estesi per riempire il container.
- flex-start - gli elementi vengono accatastati all'inizio dell'asse trasversale del container.
- flex-end - gli elementi vengono accatastati alla fine dell'asse trasversale del container.
- center - gli elementi vengono accatastati al centro dell'asse trasversale.
- baseline - gli elementi vengono allineati in base alle loro linee di base.
Nota: Se l'altezza del flex container è vincolata, il valore stretch potrebbe causare l'overflow del contenuto del flex item al di fuori dell'elemento.
Esempio della proprietà align-items:
Esempio di codice della proprietà align-items
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
justify-content: space-between;
align-items: center; /* Use another value to see the result */
height: 250px;
padding: 15px;
background-color: #1faadb;
}
.flex-container > div {
width: 15%;
height: 100%;
border-radius: 3px;
background-color: #8ebf42;
}
.flex-container .one {
height: 60%;
}
.flex-container .three {
height: 40%;
}
.flex-container .four {
height: 70%;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</div>
</body>
</html>Nel nostro esempio abbiamo usato il valore center per centrare gli elementi sull'asse trasversale. Prova altri valori e osserva il risultato.
La proprietà align-content
La proprietà align-content viene usata per allineare le linee di un flex container all'interno del container quando c'è spazio extra sull'asse trasversale, proprio come justify-content allinea i singoli elementi sull'asse principale.
Nota: La proprietà align-content non funziona quando nel flex container è presente una sola riga.
I valori di align-content e il loro significato sono i seguenti:
- stretch (predefinito) - le linee si estendono per occupare lo spazio disponibile.
- flex-start - le linee vengono raggruppate all'inizio del container.
- flex-end - le linee vengono raggruppate alla fine del container.
- center - le linee vengono raggruppate al centro del container.
- space-between - le linee vengono distribuite uniformemente; la prima linea è all'inizio del container, l'ultima alla fine.
- space-around - le linee vengono distribuite uniformemente con spazio uguale intorno a ciascuna linea.
Esempio della proprietà align-content:
Esempio della proprietà align-content
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
align-content: flex-end/* Use another value to see the result */;
min-height: 250px;
padding: 10px;
background-color: #1faadb;
}
.flex-container>div {
width: 45%;
height: 45px;
margin: 5px;
border-radius: 3px;
background-color: #8ebf42;
}
.flex-container .one,
.flex-container .nine {
width: 23%;
}
.flex-container .two,
.flex-container .six {
width: 9%;
}
.flex-container .three {
width: 25%;
}
.flex-container .four {
width: 35%;
}
.flex-container .five,
.flex-container .eleven {
width: 32%;
}
.flex-container .seven,
.flex-container .ten {
width: 6%;
}
</style>
</head>
<body>
<p>flex-end</p>
<div class="flex-container">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
<div class="six"></div>
<div class="seven"></div>
<div class="eight"></div>
<div class="nine"></div>
<div class="ten"></div>
<div class="eleven"></div>
</div>
</body>
</html>La proprietà gap
La proprietà gap definisce lo spazio tra i flex item (i gutter), senza aggiungere spazio sui bordi esterni del container. È un'alternativa più pulita all'impostazione del margin sui singoli elementi, perché non produce mai uno spazio indesiderato prima del primo elemento o dopo l'ultimo. È possibile passare un singolo valore per una spaziatura uguale tra righe e colonne, oppure due valori (row-gap column-gap).
Esempio di codice della proprietà gap
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
gap: 10px 20px; /* row-gap column-gap */
padding: 10px;
border: 1px dashed #666;
}
.flex-container > div {
width: 80px;
height: 70px;
border-radius: 3px;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="flex-container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>La proprietà flex-flow
Questa è una proprietà abbreviata per le proprietà individuali flex-direction e flex-wrap, che definiscono insieme gli assi principale e trasversale del flex container. Il valore predefinito è row nowrap.
Nota: Le direzioni di flex-flow dipendono dalla modalità di scrittura; in un contesto rtl (da destra a sinistra) il contenuto verrà invertito di conseguenza.
Esempio della proprietà flex-flow:
Esempio di codice della proprietà flex-flow
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
flex-flow: row-reverse wrap; /* Use another value to see the result */
padding: 30px;
border: 1px dashed #666;
}
.flex-container > div {
width: 30%;
height: 70px;
margin: 5px;
border-radius: 3px;
background-color: #8ebf42;
text-align: center;
font-size: 28px;
font-weight: 700;
line-height: 70px;
color: #fff;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>Puoi scegliere un altro valore per vedere come cambia la posizione degli elementi.
Proprietà dei Flex Item
La proprietà order
Per impostazione predefinita, gli elementi vengono disposti nell'ordine in cui appaiono nel codice sorgente (a partire dal gruppo ordinale con numero più basso e procedendo verso l'alto). Per modificare l'ordine degli elementi nel flex container si usa la proprietà order.
La proprietà order imposta l'ordine dei flex item assegnandoli a gruppi ordinali. Accetta un singolo valore intero, che definisce il gruppo ordinale a cui appartiene il flex item. Il valore predefinito è 0.
Esempio della proprietà order:
Proprietà order di Flexbox
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
flex-flow: row wrap;
padding: 30px;
border: 1px dashed #666;
}
.flex-container > div {
width: 30%;
height: 70px;
margin: 5px;
border-radius: 3px;
background-color: #8ebf42;
text-align: center;
font-size: 28px;
font-weight: 700;
line-height: 70px;
color: #fff;
}
.item-one {
order: 1;
}
.item-four {
order: -1;
}
.item-five {
order: 0;
}
.item-three {
order: 2;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="item-one">1</div>
<div class="item-two">2</div>
<div class="item-three">3</div>
<div class="item-four">4</div>
<div class="item-five">5</div>
</div>
</body>
</html>La proprietà align-self
La proprietà viene usata per allineare singolarmente gli elementi all'interno del flex container. I flex item vengono allineati sull'asse trasversale della linea del flex container (proprio come justify-content, ma nella direzione perpendicolare). Quando impostata, la proprietà align-self sovrascrive l'allineamento specificato da align-items.
Nota: Se il margine sull'asse trasversale di uno degli elementi è impostato su auto, align-self viene ignorato.
La proprietà align-self ha gli stessi valori di align-items. Vengono elencati di seguito per comodità.
- stretch (predefinito) - gli elementi vengono estesi per riempire il container.
- flex-start - gli elementi vengono accatastati all'inizio dell'asse trasversale del container.
- flex-end - gli elementi vengono accatastati alla fine dell'asse trasversale del container.
- center - gli elementi vengono accatastati al centro dell'asse trasversale.
- baseline - gli elementi vengono allineati in modo che le loro linee di base coincidano.
Esempio della proprietà align-self:
Esempio della proprietà align-self
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
justify-content: space-between;
height: 300px;
padding: 10px;
border: 1px dashed #666;
}
.flex-container > div {
width: 15%;
height: 80%;
margin: 5px;
border-radius: 3px;
background-color: #8ebf42;
}
div.item-two {
width: 20%;
}
div.item-three {
align-self: flex-end;
height: 80px;
margin: 0 10%;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="item-one"></div>
<div class="item-two"></div>
<div class="item-three"></div>
<div class="item-four"></div>
</div>
</body>
</html>La proprietà flex-grow
La proprietà flex-grow definisce la capacità di un elemento di crescere se necessario. Imposta il fattore di crescita flex (relativamente agli altri elementi all'interno del container), che specifica lo spazio che l'elemento deve occupare nel container durante la distribuzione dello spazio positivo.
La proprietà accetta un valore senza unità che funge da proporzione.
Nota: Il valore non può essere un numero negativo.
Se tutti gli elementi nel container hanno lo stesso valore per flex-grow (ad esempio 1), allora tutti gli elementi avranno la stessa dimensione nel container.
Se la dimensione di uno dei flex item è diversa (ad esempio 2), quell'elemento occuperà il doppio dello spazio rispetto agli altri elementi (la cui dimensione è impostata a 1).
Esempio della proprietà flex-grow:
Esempio di codice della proprietà flex-grow
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
margin-bottom: 20px;
}
.flex-container div {
flex-grow: 0.2;
padding: 30px 5px;
margin-right: -2px;
border: 2px solid #8ebf42;
}
.flex-container div.two {
flex-grow: 5;
}
.flex-container span {
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
margin: auto;
border-radius: 50%;
background-color: #8ebf42;
font-size: 28px;
font-weight: 700;
color: #fff;
}
</style>
</head>
<body>
<div class="flex-container">
<div>
<span>1</span>
</div>
<div>
<span>2</span>
</div>
<div>
<span>3</span>
</div>
<div>
<span>4</span>
</div>
<div><span>5</span>
</div>
</div>
<div class="flex-container">
<div>
<span>1</span>
</div>
<div class="two">
<span>2</span>
</div>
<div>
<span>3</span>
</div>
<div>
<span>4</span>
</div>
<div>
<span>5</span>
</div>
</div>
</body>
</html>Consigliamo di usare la proprietà abbreviata flex invece di flex-grow per controllare la flessibilità, poiché reimposta correttamente i componenti non specificati per adattarsi agli usi più comuni.
La proprietà flex-shrink
La proprietà flex-shrink viene impostata per consentire a un flex item di ridursi. Specifica lo spazio che l'elemento deve occupare nel container quando viene distribuito spazio negativo.
La proprietà accetta un valore senza unità.
Nota: Il valore non può essere un numero negativo.
Per impostazione predefinita tutti i flex item possono essere ridotti, ma se impostiamo il valore a 0 (non ridurre) manterranno la dimensione originale.
Esempio della proprietà flex-shrink:
Esempio della proprietà flex-shrink
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
}
.flex-container div {
width: 120px;
padding: 30px 10px;
margin-right: -2px;
border: 2px solid #8ebf42;
}
.flex-container div.two {
flex-shrink: 0;
}
.flex-container span {
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
margin: auto;
border-radius: 50%;
background-color: #8ebf42;
font-size: 28px;
font-weight: 700;
color: #fff;
}
</style>
</head>
<body>
<div class="flex-container">
<div>
<span>1</span>
</div>
<div class="two">
<span>2</span>
</div>
<div>
<span>3</span>
</div>
<div>
<span>4</span>
</div>
<div>
<span>5</span>
</div>
<div>
<span>6</span>
</div>
</div>
</body>
</html>Consigliamo di usare la proprietà abbreviata flex invece di flex-shrink per controllare la flessibilità, poiché reimposta correttamente i componenti non specificati per adattarsi agli usi più comuni.
La proprietà flex-basis
La proprietà flex-basis imposta la dimensione iniziale di un flex item, prima che lo spazio rimanente venga distribuito secondo i fattori flex. La proprietà viene specificata dalla parola chiave content o da un valore di larghezza.
I valori di flex-basis sono i seguenti:
- auto (predefinito) - la lunghezza è uguale alla lunghezza dell'elemento flessibile.
- width - una lunghezza assoluta, o una percentuale della dimensione principale del flex container genitore, oppure la parola chiave auto. I valori negativi non sono validi.
- content - determina il dimensionamento automatico in base al contenuto del flex item.
- initial - imposta questa proprietà al suo valore predefinito.
Nota: La proprietà content non è ancora ben supportata, quindi non è facile capire cosa facciano le sue varianti max-content, min-content e fit-content.
Esempio della proprietà flex-basis:
Esempio di codice della proprietà flex-basis
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
background-color: #8ebf42;
}
.flex-container div {
padding: 30px 10px;
margin-right: -2px;
border: 2px solid #8ebf42;
background-color: #fff;
}
.flex-container div.four {
flex-basis: 25%;
}
.flex-container span {
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
margin: auto;
border-radius: 50%;
background-color: #8ebf42;
font-size: 28px;
font-weight: 700;
color: #fff;
}
</style>
</head>
<body>
<div class="flex-container">
<div>
<span>1</span>
</div>
<div>
<span>2</span>
</div>
<div>
<span>3</span>
</div>
<div class="four">
<span>4</span>
</div>
<div>
<span>5</span>
</div>
</div>
</body>
</html>La proprietà flex
La proprietà flex è l'abbreviazione di flex-grow, flex-shrink e flex-basis insieme. flex-shrink e flex-basis sono opzionali.
Tra gli altri valori, questa proprietà può accettare auto (1 1 auto) o none (0 0 auto).
Raccomandiamo vivamente di usare la proprietà abbreviata flex invece delle proprietà individuali.
Esempio della proprietà flex:
Esempio di codice: flex al posto di flex-shrink
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
height: 150px;
padding: 10px;
margin-bottom: 20px;
border: 1px dashed #666;
}
.flex-container > div {
width: 15%;
margin: 5px;
border-radius: 3px;
background-color: #8ebf42;
}
.second > div {
flex: 1;
}
</style>
</head>
<body>
<div class="flex-container">
<div></div>
<div></div>
<div></div>
</div>
<div class="flex-container second">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>Nota: Le proprietà CSS float, clear e vertical-align non hanno effetto sui flex item.
Esempi di Flexbox
Vediamo alcuni esempi di CSS Flexbox e scopriamo che tipo di layout è possibile utilizzare per i propri progetti web.
Centrare Elementi Verticalmente e Orizzontalmente
Centrare gli elementi con tutti i mezzi disponibili in CSS è sempre stato un problema. Con l'avvento di Flexbox questo problema viene risolto facilmente. Con le proprietà align-items, align-self e justify-content è possibile allineare gli elementi sia verticalmente che orizzontalmente.
Esempio delle proprietà align-items, align-self e justify-content per centrare elementi verticalmente e orizzontalmente:
Centrare elementi verticalmente e orizzontalmente con Flexbox
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 1px dashed #666;
}
.flex-container > div {
width: 70px;
height: 70px;
margin: 5px;
border-radius: 3px;
background-color: #1faadb;
}
</style>
</head>
<body>
<div class="flex-container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>Barra di Navigazione Responsive con Ricerca
Usando Flexbox è possibile creare una barra di navigazione con le voci di menu allineate a sinistra e la barra di ricerca allineata a destra (o viceversa). La barra di navigazione è responsive: si espande o si comprime in base alla dimensione dello schermo.
Esempio della barra di navigazione responsive:
Esempio di navbar con Flexbox
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.main-nav {
display: flex;
padding: 15px;
border-radius: 5px;
background: #1c87c9;
color: #fff;
font-weight: 500;
}
.main-nav > ul {
display: flex;
flex: 2;
padding: 0;
margin: 0;
list-style-type: none;
}
.main-nav li {
margin-right: 20px;
}
.main-nav > form {
display: flex;
justify-content: flex-end;
flex: 1;
}
.main-nav input {
flex: 1;
padding: 5px;
}
.main-nav button {
padding: 0 20px;
margin-left: 10px;
border: 0;
border-radius: 20px;
background: #fff;
color: #666;
}
@media screen and (max-width: 575px) {
.main-nav {
flex-direction: column;
}
.main-nav ul {
margin-bottom: 10px;
}
}
</style>
</head>
<body>
<nav class="main-nav">
<ul>
<li>Home</li>
<li>About us</li>
<li>Services</li>
<li>Contact us</li>
</ul>
<form>
<input type="search" placeholder="Search" />
<button type="button">Go</button>
</form>
</nav>
</body>
</html>Il Layout Holy Grail
Il pattern di layout Holy Grail è molto popolare sul web. Include header, footer, l'area del contenuto principale con una navigazione a larghezza fissa a sinistra, il contenuto al centro e una sidebar a larghezza fissa a destra.
Esempio del layout holy grail:
Esempio di Holy Grail Layout con Flexbox
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
* {
box-sizing: border-box;
font-size: 18px;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
.main {
display: flex;
flex: 1;
}
.main > article {
flex: 1;
}
.main > nav,
.main > aside {
flex: 0 0 20vw;
background: #d5dce8;
}
.main > nav {
order: -1;
}
header,
footer {
background: #1c87c9;
height: 15vh;
}
header,
footer,
article,
nav,
aside {
padding: 20px;
}
</style>
</head>
<body>
<header>Header</header>
<div class="main">
<article>Article</article>
<nav>Nav</nav>
<aside>Aside</aside>
</div>
<footer>Footer</footer>
</body>
</html>