Generatore CSS Flexbox

Proprietà del contenitore

Proprietà degli elementi

Il trucco flex: 1

flex: 1 è shorthand per flex: 1 1 0%. Fa sì che un elemento:

• Cresca per riempire lo spazio disponibile (crescita: 1)
• Si riduca se necessario (riduzione: 1)
• Parta da una dimensione zero (base: 0%)

Per colonne di larghezza uguale, flex: 1 su ogni elemento fornisce una divisione perfetta. Per barre laterali che non devono ridursi sotto il contenuto, usa flex: 0 0 240px (nessuna crescita, nessuna riduzione, base di 240px).

Modelli comuni

Eroe centrato

.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Navbar con logo a sinistra, link a destra

.nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-links {
  margin-left: auto;  /* sposta a destra */
  display: flex;
  gap: 1rem;
}

Riga di schede reattiva

.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.card {
  flex: 1 1 260px;  /* crescita/riduzione, 260px minimo prima di avvolgere */
}

Campo modulo con pulsante (input flessibile, pulsante fisso)

.field {
  display: flex;
  gap: 0.5rem;
}
.field input {
  flex: 1;
}
.field button {
  flex: 0 0 auto;
}

Flexbox vs. Grid

• Flexbox: una dimensione (riga O colonna). Migliore quando le dimensioni degli elementi sono guidate dal contenuto o quando distribuisci spazio lungo una singola linea.
• Grid: due dimensioni (righe E colonne con tracce esplicite). Migliore quando il layout ha una struttura di righe e colonne simultaneamente.

Per una barra di navigazione o una pila di schede: Flexbox. Per una griglia di schede prodotto con più righe di schede allineate: CSS Grid. Molte pagine reali usano entrambi, un layout di pagina Grid con Flexbox all’interno dei componenti.

Problemi comuni

• Elementi che non riempiono il contenitore: il default align-items: stretch si applica solo se gli elementi non hanno altezza fissa. Con altezza esplicita, rimangono a quella dimensione.
• gap non funziona: controlla il supporto del browser. Il gap flex è arrivato tardi; Safari <14.1 non lo supportava. Ora è universale nel 2024+.
• Figli di flex colonna che collassano: una colonna flex ha align-items: stretch come default, che allunga gli elementi alla larghezza del contenitore. Se un figlio imposta una larghezza, esce.
• order è solo visivo: i lettori di schermo e la navigazione da tastiera seguono l’ordine del DOM. Non usare order per rendere il contenuto sensato; usalo solo per la rifinitura visiva.