Che cos'è Flexbox e come si centra il contenuto con esso?

Question

Accepted Answer

**Flexbox** è un sistema di layout unidimensionale — dispone gli elementi in una singola **riga** o **colonna** e distribuisce lo spazio lungo quella linea. È la risposta moderna ai problemi di allineamento e spaziatura che una volta richiedevano float e hack.

```css
.container {
  display: flex;              /* turn on flex; children become flex items */
  flex-direction: row;       /* main axis: row (default) or column */
  gap: 1rem;                 /* space BETWEEN items (no margin hacks) */
}
```

## I due assi

Flexbox ha un **asse principale** (la direzione in cui fluiscono gli elementi) e un **asse trasversale** (perpendicolare). Le proprietà si mappano su di essi:

```css
.container {
  justify-content: center; /* aligns along the MAIN axis */
  align-items: center;     /* aligns along the CROSS axis */
}
```

## Centering perfetto — il caso d'uso più celebre

```css
.center {
  display: flex;
  justify-content: center; /* horizontal (main axis = row) */
  align-items: center;     /* vertical (cross axis) */
  min-height: 100vh;
}
```

Queste tre righe centrano un figlio sia orizzontalmente che verticalmente — un compito che era notoriamente difficile prima di Flexbox.

## Pattern comuni

```css
/* push items apart: logo left, menu right */
.navbar { display: flex; justify-content: space-between; align-items: center; }

/* wrap to new lines when items don't fit */
.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
```

Le opzioni di `justify-content` includono `flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `space-evenly`.

## Perché è importante

Flexbox è lo strumento quotidiano per navbar, gruppi di pulsanti, righe di card, centering e qualsiasi layout "riga di elementi".

Comprendere il modello dell'asse principale/trasversale (e che `justify-content`/`align-items` scambiano significato quando si cambia `flex-direction`) è il modello mentale chiave.

Usa Flexbox per layout 1D e Grid per layout 2D.