Cos'è Flexbox?

Flexbox (Flexible Box Layout) è un modulo CSS progettato per creare layout complessi e adattivi. Permette di gestire la disposizione, l'allineamento e la distribuzione dello spazio tra gli elementi del contenitore, anche se le loro dimensioni sono sconosciute o dinamiche.

Concetti principali di Flexbox:

• Asse principale (main axis): Asse lungo il quale vengono disposti gli elementi. Per impostazione predefinita, orizzontale (da sinistra a destra).
• Asse trasversale (cross axis): Asse perpendicolare all'asse principale. Per impostazione predefinita, verticale (dall'alto verso il basso).
• Contenitore (flex container): Elemento a cui si applicano le proprietà Flexbox (display: flex o display: inline-flex).
• Elementi (flex items): Elementi figli del contenitore.

Proprietà per il contenitore Flex:

• display: flex o inline-flex
• flex-direction: Determina la direzione dell'asse principale (row, row-reverse, column, column-reverse)
• flex-wrap: Determina se gli elementi devono andare a capo su una nuova riga (nowrap, wrap, wrap-reverse)
• justify-content: Allineamento degli elementi lungo l'asse principale (flex-start, flex-end, center, space-between, space-around, space-evenly)
• align-items: Allineamento degli elementi lungo l'asse trasversale (flex-start, flex-end, center, baseline, stretch)
• align-content: Allineamento delle righe o colonne lungo l'asse trasversale in un contenitore multi-linea (flex-start, flex-end, center, space-between, space-around, stretch)

Proprietà per gli elementi Flex:

• order: Determina l'ordine dell'elemento nel contenitore
• flex-grow: Determina quanto l'elemento deve crescere per occupare lo spazio disponibile
• flex-shrink: Determina quanto l'elemento deve ridursi se lo spazio non è sufficiente
• flex-basis: Determina la dimensione iniziale dell'elemento prima della distribuzione dello spazio
• flex: Proprietà abbreviata per flex-grow, flex-shrink e flex-basis
• align-self: Sovrascrive l'allineamento dell'elemento lungo l'asse trasversale (flex-start, flex-end, center, baseline, stretch, auto)

Esempio di utilizzo:

/* Contenitore */
.container {
  display: flex; /* Attiva Flexbox */
  flex-direction: row; /* Disposizione in riga */
  justify-content: center; /* Centra orizzontalmente */
  align-items: center; /* Centra verticalmente */
  height: 200px; /* Altezza del contenitore */
  border: 1px solid black;
}

/* Elementi */
.item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
}

Flexbox semplifica molto la creazione di layout responsive rispetto ai metodi tradizionali (float, inline-block, table).