logo tritatasti
Corso Base » CSS

Layout moderno e responsive: Flexbox, Grid e Media Query

Flexbox: disporre elementi su una riga o colonna

Flexbox è oggi lo strumento più usato per allineare e distribuire elementi lungo una sola dimensione (una barra di navigazione, una riga di card).

.contenitore {
  display: flex;
  justify-content: space-between; /* distribuzione lungo l'asse principale */
  align-items: center;            /* allineamento lungo l'asse secondario */
  gap: 20px;                      /* spazio tra gli elementi */
}
  • flex-direction: row | column — orizzontale o verticale
  • justify-content: flex-start | center | flex-end | space-between | space-around
  • align-items: flex-start | center | flex-end | stretch
  • flex-wrap: wrap — permette agli elementi di andare su più righe se non c’entrano
<div class="contenitore">
  <div class="card">1</div>
  <div class="card">2</div>
  <div class="card">3</div>
</div>

Grid: layout a griglia bidimensionale

Dove Flexbox lavora su una dimensione, CSS Grid lavora su righe e colonne insieme — ideale per l’impaginazione generale di una pagina.

.griglia {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* tre colonne: la centrale doppia rispetto alle laterali */
  gap: 15px;
}

fr (fraction) distribuisce lo spazio in proporzione — molto più semplice che calcolare percentuali a mano.

Quando usare cosa: Flexbox per una barra di navigazione o una riga di elementi; Grid per la struttura generale della pagina (header, sidebar, contenuto, footer). Spesso si usano insieme.

Media query: adattarsi a schermi diversi

Prerequisito obbligatorio, già visto nella Lezione 5: il tag viewport nel <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Le media query applicano regole CSS solo entro certe condizioni, tipicamente una larghezza di schermo:

.contenitore {
  display: flex;
  flex-direction: row;
}

@media (max-width: 768px) {
  .contenitore {
    flex-direction: column; /* su schermi stretti, gli elementi si impilano */
  }
}

Approccio mobile-first (consigliato): scrivi prima lo stile base per mobile, poi usi min-width per aggiungere stili man mano che lo schermo si allarga.

/* stile base, pensato per mobile */
.contenitore {
  flex-direction: column;
}

/* da tablet in su */
@media (min-width: 768px) {
  .contenitore {
    flex-direction: row;
  }
}

Esercitazione pratica

Costruisci una barra di navigazione con Flexbox (logo a sinistra, menu a destra). Poi costruisci una griglia a 3 colonne con Grid per una sezione “servizi”. Infine aggiungi una media query che, sotto i 768px, trasformi entrambe in layout verticale a colonna singola.

Approfondisci

no link
Parliamone