Come usare flexbox per disporre gli elementi sulla pagina?

Flexbox (o Flexible Box Layout) è un modulo CSS progettato per creare layout flessibili degli elementi in un contenitore, consentendo di distribuire facilmente lo spazio e di allineare gli elementi, anche quando le loro dimensioni sono sconosciute o cambiano dinamicamente.

Il concetto principale di Flexbox è il contenitore flex e i suoi elementi flex.

Proprietà per il contenitore flex (display: flex;):

• flex-direction: Determina la direzione in cui vengono disposti gli elementi flex nel contenitore (asse principale).

  • row (predefinito): orizzontale, da sinistra a destra.
  • row-reverse: orizzontale, da destra a sinistra.
  • column: verticale, dall’alto verso il basso.
  • column-reverse: verticale, dal basso verso l’alto.

• flex-wrap: Determina se gli elementi flex si avvolgono in una nuova(i) riga(e) se non ci stanno in una sola riga.

  • nowrap (predefinito): tutti in una riga.
  • wrap: si avvolgono in nuove righe.
  • wrap-reverse: si avvolgono in nuove righe in ordine inverso.

• justify-content: Allinea gli elementi flex lungo l’asse principale.

  • flex-start (predefinito): all’inizio dell’asse principale.
  • flex-end: alla fine dell’asse principale.
  • center: al centro dell’asse principale.
  • space-between: distribuzione uniforme con spazi tra gli elementi.
  • space-around: distribuzione uniforme con spazi intorno agli elementi.
  • space-evenly: distribuzione uniforme con spazi uguali tra e intorno agli elementi.

• align-items: Allinea gli elementi flex lungo l’asse trasversale (perpendicolare a quello principale).

  • stretch (predefinito, se gli elementi non hanno altezza/larghezza definite): allunga gli elementi in altezza/larghezza lungo l’asse trasversale.
  • flex-start: all’inizio dell’asse trasversale.
  • flex-end: alla fine dell’asse trasversale.
  • center: al centro dell’asse trasversale.
  • baseline: allineamento sulla linea di base del testo.

• align-content: Allinea le righe di elementi flex lungo l’asse trasversale quando ci sono ritorni a capo (flex-wrap: wrap). Funziona in modo analogo a justify-content ma per le righe.

  • stretch (predefinito): allunga le righe.
  • flex-start: righe all’inizio dell’asse trasversale.
  • flex-end: righe alla fine dell’asse trasversale.
  • center: righe al centro dell’asse trasversale.
  • space-between: distribuzione uniforme delle righe con spazi tra di esse.
  • space-around: distribuzione uniforme delle righe con spazi intorno.

• gap, row-gap, column-gap: Definisce gli spazi tra gli elementi flex (in un valore unico o separatamente per righe e colonne).

.flex-container {
  display: flex; /* Rende l’elemento un contenitore flex */
  flex-direction: row; /* Gli elementi sono disposti orizzontalmente */
  flex-wrap: wrap; /* Gli elementi si avvolgono in una nuova riga */
  justify-content: center; /* Gli elementi sono allineati al centro dell’asse principale */
  align-items: center; /* Gli elementi sono allineati al centro dell’asse trasversale */
  gap: 10px; /* Spazio di 10px tra gli elementi flex */
}

Proprietà per gli elementi flex (figli diretti del contenitore flex):

• order: Determina l’ordine di visualizzazione dell’elemento nel contenitore (predefinito 0). I valori più piccoli appaiono prima.

• flex-grow: Definisce il coefficiente che determina quanto un elemento flex può crescere rispetto agli altri elementi nel contenitore, occupando lo spazio disponibile. Predefinito 0.

• flex-shrink: Definisce il coefficiente che determina quanto un elemento flex può ridursi in caso di mancanza di spazio. Predefinito 1.

• flex-basis: Definisce la dimensione di base dell’elemento flex prima della distribuzione dello spazio libero. Può essere in px, %, rem, auto, ecc. (predefinito auto).

• flex: Proprietà abbreviata per flex-grow, flex-shrink, flex-basis (ad esempio, flex: 1 1 0;).

• align-self: Sovrascrive l’allineamento dell’elemento lungo l’asse trasversale, impostato da align-items nel contenitore. Prende gli stessi valori.

.flex-item {
  order: 2; /* Questo elemento sarà visualizzato come secondo, indipendentemente dalla sua posizione in HTML */
  flex-grow: 1; /* Questo elemento occuperà lo spazio rimanente */
  flex-shrink: 0; /* Questo elemento non si ridurrà */
  flex-basis: 100px; /* Dimensione di base di 100px */
  align-self: flex-start; /* Allineamento di questo elemento all’inizio dell’asse trasversale */
}

.another-item {
  flex: 1 1 auto; /* Forma abbreviata: grow: 1, shrink: 1, basis: auto */
}

Flexbox permette di creare vari layout, da semplici allineamenti a strutture più complesse e adattive, controllando la distribuzione dello spazio e l’allineamento degli elementi all’interno del contenitore.