Flexbox trasforma radicalmente il modo in cui organizziamo e gestiamo i layout nelle pagine web. Con display: flex, è possibile allineare e distribuire gli elementi di un container con estrema facilità, adattandosi automaticamente a qualsiasi dimensione dello schermo. In questa guida, scopriremo come utilizzare display: flex per progettare layout reattivi e visivamente accattivanti, accompagnati da esempi pratici e consigli.

Concetti Base di Flexbox

Quando si utilizza Flexbox per creare layout reattivi, è importante conoscere alcuni concetti fondamentali che governano il comportamento degli elementi all'interno del contenitore flessibile. Questi concetti ti aiuteranno a comprendere come gli elementi si allineano e si distribuiscono nello spazio disponibile:

• Flex Container: L'elemento che contiene i flex items e a cui viene applicato display: flex.
• Flex Items: Gli elementi all'interno del flex container, disposti e allineati lungo gli assi.
• Main Axis: L'asse principale su cui si allineano i flex items; può essere orizzontale o verticale.
• Cross Axis: L'asse perpendicolare all'asse principale, che gestisce l'allineamento trasversale.
• Main Start/Main End: I punti di inizio e fine dell'asse principale, che definiscono la direzione di allineamento.
• Cross Start/Cross End: I punti di inizio e fine dell'asse secondario, per l'allineamento verticale o orizzontale.
• Main Size/Cross Size: Le dimensioni del flex container lungo gli assi principale e secondario.

display flex

La proprietà display: flex trasforma un elemento in un flex container, modificando il modo in cui i suoi figli vengono disposti. A differenza del comportamento predefinito di un container condisplay: block, dove gli elementi si dispongono uno sotto l'altro, con display: flex gli elementi si allineano su una linea orizzontale, ma occupano solo lo spazio necessario per il loro contenuto, a meno che non venga specificato diversamente con altre proprietà come flex-grow.

.container {
  display: flex;
}                                                                                

flex-direction

La proprietà flex-direction definisce la direzione principale lungo la quale gli elementi figli di un flex container vengono disposti. Per default, gli elementi si allineano orizzontalmente da sinistra a destra (direzione row), ma questa proprietà offre diverse opzioni per controllare il flusso degli elementi.

Le opzioni principali di flex-direction sono:

• row: Dispone gli elementi orizzontalmente da sinistra a destra (default).
• row-reverse: Dispone gli elementi orizzontalmente da destra a sinistra.
• column: Dispone gli elementi verticalmente dall'alto verso il basso.
• column-reverse: Dispone gli elementi verticalmente dal basso verso l'alto.

Utilizzando flex-direction, puoi facilmente cambiare l'orientamento degli elementi in base alle esigenze del layout, rendendo il design più flessibile e adattabile.

.container {
  /* default value row */
  display: flex;
  flex-direction: row | row-reverse | column | column-reverse;
}

flex-wrap

La proprietà flex-wrap controlla se gli elementi figli di un flex container devono essere disposti su una singola riga o se possono andare a capo su più righe quando lo spazio disponibile è insufficiente. Per default, tutti gli elementi si dispongono su una singola riga, ma conflex-wrap puoi modificare questo comportamento.

Le opzioni principali di flex-wrap sono:

• nowrap: Gli elementi rimangono su una singola riga, ignorando lo spazio disponibile (default).
• wrap: Gli elementi vanno a capo su nuove righe se lo spazio nella riga principale non è sufficiente.
• wrap-reverse: Simile a wrap, ma le nuove righe si dispongono in ordine inverso (dall'alto verso il basso).

Usare flex-wrap è utile quando si vuole che gli elementi si adattino dinamicamente a container con dimensioni variabili, garantendo che il layout rimanga ordinato e leggibile anche in spazi ristretti.

.container {
  display: flex;
  flex-wrap: nowrap | wrap | wrap-reverse;
}

justify-content

La proprietà justify-content definisce come distribuire lo spazio libero lungo l'asse principale del flex container e come allineare gli elementi figli all'interno di esso. È particolarmente utile quando si desidera controllare l'allineamento orizzontale degli elementi in un container con flex-direction: row.

Le opzioni principali di justify-content sono:

• flex-start: Gli elementi vengono allineati all'inizio dell'asse principale (default).
• flex-end: Gli elementi vengono allineati alla fine dell'asse principale.
• center: Gli elementi vengono centrati lungo l'asse principale.
• space-between: Lo spazio libero viene distribuito equamente tra gli elementi, con il primo e l'ultimo elemento allineati ai bordi del container.
• space-around: Lo spazio libero viene distribuito equamente attorno agli elementi, creando spazi uguali tra ogni elemento e i bordi del container.
• space-evenly: Distribuisce lo spazio uniformemente tra gli elementi, inclusi i bordi del container.

Usando justify-content, puoi controllare con precisione l'allineamento degli elementi figli, rendendo il layout flessibile e adattabile alle diverse larghezze del container.

.container {
  display: flex;
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}                                                                               

align-items

La proprietà align-items controlla l'allineamento degli elementi figli lungo l'asse trasversale (cross axis) del flex container. È utile per definire come gli elementi vengono distribuiti verticalmente (quando flex-directionè impostato su row) o orizzontalmente (quando flex-directionè impostato su column).

Le opzioni principali di align-items sono:

• stretch: Gli elementi si allungano per riempire l'intero spazio dell'asse trasversale (default).
• flex-start: Gli elementi vengono allineati all'inizio dell'asse trasversale.
• flex-end: Gli elementi vengono allineati alla fine dell'asse trasversale.
• center: Gli elementi vengono centrati lungo l'asse trasversale.
• baseline: Gli elementi vengono allineati in base alla loro linea di base del testo.

Con align-items, puoi controllare l'allineamento verticale o orizzontale degli elementi in base alla direzione dell'asse, migliorando l'estetica e la coerenza del layout.

.container {
  display: flex;
  align-items: stretch | flex-start | flex-end | center | baseline;
} 

align-content

La proprietà align-content gestisce la distribuzione dello spazio tra le righe di un flex container quando ci sono più righe di elementi. Questa proprietà è rilevante solo quando gli elementi figli vanno a capo e occupano più di una riga, ad esempio quando si utilizzaflex-wrap.

Le opzioni principali di align-content sono:

• stretch: Le righe vengono allungate per riempire l'intero spazio disponibile (default).
• flex-start: Le righe vengono allineate all'inizio del container.
• flex-end: Le righe vengono allineate alla fine del container.
• center: Le righe vengono centrate nello spazio disponibile.
• space-between: Lo spazio libero viene distribuito equamente tra le righe.
• space-around: Lo spazio libero viene distribuito equamente attorno a ogni riga.
• space-evenly: Distribuisce lo spazio uniformemente tra le righe, inclusi i bordi del container.

Align-content è utile per controllare la disposizione delle righe all'interno di un container con più righe, migliorando la gestione dello spazio verticale e l'estetica del layout.

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch | flex-start | flex-end | center | space-between | space-around | space-evenly;
}

gap

La proprietà gap (nota anche come grid-gap in layout a griglia) viene utilizzata per definire lo spazio tra gli elementi figli di un flex container. Questa proprietà è particolarmente utile per aggiungere margini tra i flex items senza dover ricorrere a margini manuali su ciascun elemento.

Con gap, puoi specificare una distanza uniforme tra gli elementi, semplificando la gestione degli spazi nel layout. È possibile utilizzare un singolo valore per uno spazio uniforme su entrambi gli assi o due valori per specificare separatamente lo spazio lungo l'asse principale e l'asse trasversale.

Esempi di utilizzo di gap:

• gap: 10px; - Imposta uno spazio di 10px tra tutti i flex items.
• gap: 10px 20px; - Imposta uno spazio di 10px lungo l'asse principale e 20px lungo l'asse trasversale.

.container {
  display: flex;
  flex-wrap: wrap; 

  gap: 10px;
  gap: 10px 20px; /* row-gap column gap */
  row-gap: 10px;
  column-gap: 20px;
}

order

La proprietà order consente di controllare l'ordine di visualizzazione dei flex items all'interno di un flex container. Di default, tutti gli elementi hanno un valore di orderpari a 0, il che significa che vengono visualizzati nell'ordine in cui appaiono nel codice HTML.

Modificando il valore di order, è possibile alterare la disposizione degli elementi indipendentemente dall'ordine in cui sono definiti nel markup. Gli elementi con un valore diorder inferiore verranno visualizzati prima di quelli con un valore superiore.

.item-1 {
  order: 1;
}

.item-2 {
  order: 2;
}

align-self

La proprietà align-self permette di modificare l'allineamento di un singolo elemento figlio all'interno di un flex container, sovrascrivendo l'allineamento definito dalla proprietà align-items del container stesso. Questa proprietà è utile quando si desidera che un particolare elemento si allinei diversamente rispetto agli altri.

Le opzioni principali di align-self sono le stesse di align-items:

• auto: L'elemento eredita l'allineamento definito da align-itemsdel container (default).
• stretch: L'elemento si allunga per riempire l'intero spazio disponibile lungo l'asse trasversale.
• flex-start: L'elemento viene allineato all'inizio dell'asse trasversale.
• flex-end: L'elemento viene allineato alla fine dell'asse trasversale.
• center: L'elemento viene centrato lungo l'asse trasversale.
• baseline: L'elemento viene allineato in base alla linea di base del testo.

.container {
  display: flex;
  align-items: center;
}

.item-3 {
  align-self: stretch;
}

flex-grow

La proprietà flex-grow determina quanto un elemento figlio dovrebbe crescere rispetto agli altri elementi all'interno di un flex container quando c'è spazio disponibile. Di default, tutti gli elementi hanno un valore di flex-grow pari a 0, il che significa che non cresceranno oltre la loro dimensione di base.

Quando viene assegnato un valore positivo a flex-grow, l'elemento si espanderà per occupare lo spazio disponibile nel container in proporzione al valore specificato. Ad esempio, un elemento con flex-grow: 2 crescerà il doppio rispetto a un elemento conflex-grow: 1.

Esempi di utilizzo di flex-grow:

• flex-grow: 0; - L'elemento non cresce, mantenendo la sua dimensione di base (default).
• flex-grow: 1; - L'elemento cresce per occupare lo spazio disponibile in maniera uniforme con altri elementi che hanno lo stesso valore.
• flex-grow: 2; - L'elemento cresce per occupare il doppio dello spazio rispetto agli elementi con flex-grow: 1.

.item-1 {
  flex-grow: 2;
}

.item-2 {
  flex-grow: 1;
}

.item-3 {
  flex-grow: 0;
}

flex-shrink

La proprietà flex-shrink controlla la capacità di un elemento figlio di ridursi all'interno di un flex container quando lo spazio è limitato. Di default, tutti gli elementi hanno un valore di flex-shrink pari a 1, il che significa che si ridurranno in proporzione agli altri elementi per adattarsi allo spazio disponibile.

Un valore più alto di flex-shrink farà sì che l'elemento si riduca più degli altri, mentre un valore di 0 impedirà all'elemento di ridursi, mantenendo la sua dimensione originale.

Esempi di utilizzo di flex-shrink:

• flex-shrink: 0; - L'elemento non si riduce, mantenendo la sua dimensione di base.
• flex-shrink: 1; - L'elemento si riduce in proporzione agli altri elementi (default).
• flex-shrink: 2; - L'elemento si riduce il doppio rispetto agli elementi con flex-shrink: 1.

TIPS: Usa flex-shrink: 0 sugli elementi SVG per impedirne la riduzione quando lo spazio disponibile è limitato.

.item-1 {
  flex-shrink: 2;
}

.item-2 {
  flex-shrink: 1;
}

.item-3 {
  flex-shrink: 0;
}

flex-basis

La proprietà flex-basis definisce la dimensione iniziale di un elemento figlio all'interno di un flex container prima che lo spazio disponibile venga distribuito. Questa proprietà stabilisce una base per la dimensione dell'elemento, che può essere sovrascritta dalle proprietàflex-grow e flex-shrink se necessario.

Flex-basis può essere espresso in varie unità di misura valide, come pixel (px), percentuali (%), o valori relativi (em, rem), e può anche essere impostato su parole chiave specifiche, come auto o parole chiave di dimensionamento intrinseco.

Esempi di utilizzo di flex-basis:

• flex-basis: 100px; - L'elemento avrà una dimensione iniziale di 100 pixel.
• flex-basis: 50%; - L'elemento occuperà inizialmente il 50% dello spazio disponibile nel container.
• flex-basis: auto; - L'elemento assumerà la sua dimensione naturale in base al contenuto.
• flex-basis: max-content; - L'elemento avrà la dimensione del contenuto massimo senza andare a capo.
• flex-basis: min-content; - L'elemento avrà la dimensione minima necessaria per contenere il contenuto senza tagliarlo.
• flex-basis: fit-content; - L'elemento si adatterà al contenuto, con la dimensione minima possibile che non provoca traboccamenti.

Flex-basis è utile per definire la larghezza o altezza di base di un elemento, offrendo un punto di partenza per il layout flessibile e adattabile. Questa proprietà ti permette di controllare come gli elementi si dimensionano all'interno di un flex container, utilizzando unità specifiche o dimensioni basate sul contenuto.

.item-1 {
  flex-basis: 300px; 
}

flex

La proprietà flex è una scorciatoia potente che combina tre proprietà fondamentali di Flexbox:flex-grow, flex-shrink e flex-basis. Con flex, puoi controllare con un'unica dichiarazione quanto un elemento figlio dovrebbe crescere, ridursi e quale dovrebbe essere la sua dimensione iniziale all'interno di un flex container.

La sintassi per la proprietà flex è:

flex: <flex-grow> <flex-shrink> <flex-basis>;

Esempi comuni di utilizzo di flex:

• flex: 1; - Abbreviazione per flex: 1 1 0%, dove l'elemento può crescere e ridursi in base allo spazio disponibile, partendo da una dimensione base di 0.
• flex: 0 1 auto; - L'elemento può ridursi ma non crescere, con una dimensione di base determinata automaticamente dal suo contenuto.
• flex: 2 1 100px; - L'elemento cresce il doppio rispetto agli altri, si riduce quando necessario, e parte da una dimensione iniziale di 100px.

Utilizzare la proprietà flex semplifica il controllo del comportamento flessibile degli elementi, poiché ti permette di combinare le funzionalità di flex-grow, flex-shrink, e flex-basis in una sola riga di codice.

.container {
  display: flex;
}

.item-1 {
  flex: 1 2 100px; /* flex-grow: 1; flex-shrink: 2; flex-basis: 100px */
}

.item-2 {
  flex: 2 1 200px; /* flex-grow: 2; flex-shrink: 1; flex-basis: 200px */
}

.item-3 {
  flex: 1 1 150px; /* flex-grow: 1; flex-shrink: 1; flex-basis: 150px */
}