A cosa serve Flexbox?

Flexbox viene utilizzato per creare layout flessibili e adattivi in CSS. Permette di allineare e distribuire facilmente gli elementi all'interno del contenitore, regolando automaticamente le loro dimensioni e posizioni in base allo spazio disponibile.

Concetti principali di Flexbox:

• Contenitore Flex: Elemento a cui si applica display: flex; o display: inline-flex;. Contiene gli elementi flex.
• Elementi Flex: Figli diretti del contenitore flex.

Flexbox permette di controllare:

• La direzione di disposizione degli elementi (flex-direction).
• La rottura degli elementi alla riga/colonna successiva (flex-wrap).
• L'allineamento degli elementi lungo l'asse principale (justify-content).
• L'allineamento degli elementi lungo l'asse trasversale (align-items per elementi singoli e align-content per più righe/colonne).
• L'ordine di visualizzazione degli elementi (order).
• La distribuzione dello spazio libero tra gli elementi (flex-grow, flex-shrink, flex-basis).

Esempio di utilizzo di base:

.contenitore {
  display: flex;
  justify-content: center; /* Centrare orizzontalmente */
  align-items: center; /* Centrare verticalmente */
}

.elemento {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin: 10px;
}

<div class="contenitore">
  <div class="elemento"></div>
  <div class="elemento"></div>
  <div class="elemento"></div>
</div>