A cosa serve flex in CSS?

Flexbox viene utilizzato per creare distribuzioni unidimensionali di elementi in un contenitore. Permette di gestire l’allineamento, la distribuzione dello spazio e l’ordine degli elementi.

Concetti principali:

• Contenitore Flex: Elemento padre a cui viene assegnato display: flex o display: inline-flex.
• Elementi Flex: Elementi figli del contenitore Flex.
• Asse Principale: Asse principale del contenitore Flex. Definito dalla proprietà flex-direction. Di default è orizzontale (row).
• Asse Incrociato: Asse perpendicolare all’Asse Principale.

Proprietà chiave per il contenitore Flex:

• display: Definisce che l’elemento è un contenitore flex (flex o inline-flex).
• flex-direction: Imposta la direzione dell’asse principale (row, row-reverse, column, column-reverse).
• justify-content: Allinea gli elementi flex lungo l’asse principale (flex-start, flex-end, center, space-between, space-around, space-evenly).
• align-items: Allinea gli elementi flex lungo l’asse incrociato (flex-start, flex-end, center, baseline, stretch).
• flex-wrap: Determina se gli elementi flex devono avvolgersi in una nuova riga/colonna quando lo spazio è insufficiente (nowrap, wrap, wrap-reverse).

Proprietà chiave per gli Elementi Flex:

• order: Imposta l’ordine visivo dell’elemento flex (default 0).
• flex-grow: Determina quanto può crescere un elemento flex rispetto agli altri (default 0).
• flex-shrink: Determina quanto può ridursi un elemento flex rispetto agli altri (default 1).
• flex-basis: Imposta la dimensione iniziale dell’elemento flex prima della distribuzione dello spazio libero (default auto).
• align-self: Sovrascrive l’allineamento dell’elemento flex lungo l’asse incrociato per un elemento specifico.

Esempio di utilizzo:

.container {
  display: flex;
  justify-content: center; /* Centrare lungo l’asse principale */
  align-items: center; /* Centrare lungo l’asse incrociato */
  height: 200px;
  border: 1px solid black;
}

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

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Questo permette di centrare facilmente gli elementi, creare griglie responsive e gestire lo spazio tra gli elementi.