Come impostare le proprietà di flexbox?

Le proprietà vengono impostate per il contenitore (l'elemento a cui si applica display: flex o display: inline-flex) e i suoi discendenti diretti (gli elementi all'interno del contenitore).

Proprietà per il contenitore:

• display: Determina che l'elemento è un contenitore flex. Valori possibili: flex (a blocco) e inline-flex (in linea).
• flex-direction: Imposta la direzione dell'asse principale in cui sono disposti gli elementi flex. Valori possibili: row (predefinito, da sinistra a destra), row-reverse (da destra a sinistra), column ( dall'alto verso il basso), column-reverse (dal basso verso l'alto).
• flex-wrap: Controlla se gli elementi flex si avvolgono in una nuova riga se superano i limiti del contenitore. Valori possibili: nowrap (predefinito, senza avvolgimento), wrap (avvolgimento in una nuova riga), wrap-reverse (avvolgimento in ordine inverso).
• justify-content: Allinea gli elementi flex lungo l'asse principale. Valori possibili: flex-start (inizio del contenitore), flex-end (fine del contenitore), center, space-between (spazio uniforme tra gli elementi, primo all'inizio, ultimo alla fine), space-around (spazio uniforme intorno a ogni elemento).
• align-items: Allinea gli elementi flex lungo l'asse trasversale. Valori possibili: stretch (predefinito, estende gli elementi in altezza), flex-start (inizio del contenitore), flex-end (fine del contenitore), center, baseline (allineamento sulla linea di base del testo).
• align-content: Allinea le righe di elementi flex (quando si usa flex-wrap) lungo l'asse trasversale. Non influisce se c'è solo una riga. Valori possibili: stretch (predefinito), flex-start, flex-end, center, space-between, space-around.
• gap, row-gap, column-gap: Impostano la distanza tra gli elementi flex lungo gli assi principale e trasversale.

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

• order: Determina l'ordine di disposizione dell'elemento all'interno del contenitore. Per impostazione predefinita, tutti hanno order: 0. Gli elementi con valore order inferiore vengono prima.
• flex-grow: Determina di quante volte l'elemento può aumentare rispetto agli altri in caso di spazio libero. Predefinito 0 (non cresce).
• flex-shrink: Determina di quante volte l'elemento può ridursi in caso di mancanza di spazio. Predefinito 1 (si riduce).
• flex-basis: Imposta la dimensione iniziale dell'elemento prima della distribuzione dello spazio libero. Può essere in pixel, percentuale o auto. Predefinito auto.
• flex: Proprietà abbreviata per flex-grow, flex-shrink e flex-basis. Ad esempio, flex: 1 1 auto;.
• align-self: Sovrascrive il valore di align-items per un elemento singolo. Valori possibili: auto (usa il valore di align-items del genitore), stretch, flex-start, flex-end, center, baseline.

Esempio:

.flex-container {
  display: flex; /* Rende l'elemento un contenitore flex */
  flex-direction: row; /* Dispone gli elementi in riga */
  justify-content: center; /* Allinea gli elementi al centro dell'asse principale */
  align-items: center; /* Allinea gli elementi al centro dell'asse trasversale */
  gap: 10px; /* Imposta la distanza tra gli elementi */
}

.flex-item {
  flex-grow: 1; /* L'elemento può crescere */
  flex-basis: 100px; /* Dimensione iniziale dell'elemento */
}

.special-item {
  order: -1; /* Questo elemento sarà posizionato per primo */
  align-self: flex-end; /* Sovrascrive l'allineamento trasversale per questo elemento */
}