Flexbox: un menu vero

Te lo mostro: scatole affiancate

I link del menu ora stanno sulla pagina uno dopo l’altro, un po’ come parole in una frase. Un menu vero ha le voci allineate ordinatamente, affiancate, con spazi. CSS ha uno strumento per allineare le scatole chiamato flexbox:

nav {
  display: flex;    /* this box's children line up side by side */
  gap: 16px;        /* space between them */
}

Ecco fatto. display: flex dice alla scatola: “Allinea i tuoi figli (i link, qui) in fila.” E gap imposta lo spazio tra loro. Flexbox può fare molto di più:

nav {
  display: flex;
  gap: 16px;
  justify-content: center;   /* center children horizontally */
  align-items: center;       /* also align them to the middle vertically */
  flex-wrap: wrap;           /* if they don't fit, wrap to the next line */
}

Te lo mostro: un menu come quello dei siti veri

Combiniamo tutto quello che già sai con flexbox:

header {
  background-color: #1d4ed8;   /* a colored bar at the top */
  padding: 16px;
}

header h1 {
  color: white;
  margin: 0;                   /* heading without its default spacing */
}

nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

nav a {
  color: white;
  text-decoration: none;       /* remove the underline from links */
  padding: 8px 14px;
  border-radius: 999px;        /* fully rounded ends = a pill shape */
  background-color: rgba(255, 255, 255, 0.15);  /* semi-transparent white */
}

nav a:hover {
  background-color: rgba(255, 255, 255, 0.35);
}

Qualcosa di nuovo alla fine: :hover significa “quando ci passi sopra con il mouse”. La voce del menu si illumina al passaggio – esattamente come sui siti che conosci.

Ora tocca a te 💪

Trasforma il tuo menu in un menu vero: una barra colorata per tutta la larghezza dell’header, voci affiancate a forma di pillola, che si illuminano al passaggio. Prendi i colori dalla tua palette della lezione 6.

header {
  background-color: #1d4ed8;
  padding: 16px;
}

header h1 { color: white; margin: 0; }

nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

nav a {
  color: white;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.15);
}

nav a:hover { background-color: rgba(255, 255, 255, 0.35); }

header {
  background-color: #ea580c;
  padding: 16px;
}

header {
  background-color: #15803d;
  padding: 16px;
}

header {
  background-color: #b91c1c;
  padding: 16px;
}

Cosa porti via da questa lezione

• display: flex allinea i figli di una scatola in fila, gap mette spazio tra loro.
• justify-content e align-items allineano, flex-wrap: wrap permette di andare a capo.
• :hover = “quando il mouse ci passa sopra”. Un piccolo effetto rende un sito web vivo.

© 2026 Ing. Martin Polak / AlgoRhino · Condizioni d'uso dei contenuti