Flexbox : un vrai menu

Apprends à aligner les boîtes côte à côte, et ton menu ressemblera à celui d'un vrai site web.

Montre-moi : des boîtes côte à côte

Les liens de ton menu sont actuellement sur la page les uns après les autres, un peu comme des mots dans une phrase. Un vrai menu a ses éléments alignés proprement, côte à côte, avec de l’espace. CSS a un outil pour aligner les boîtes appelé flexbox :

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

C’est tout. display: flex dit à la boîte : « Aligne tes enfants (les liens, ici) en rangée. » Et gap définit l’espace entre eux. Flexbox peut faire bien plus :

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 */
}

Combinons tout ce que tu sais déjà avec 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);
}

Quelque chose de nouveau à la fin : :hover signifie « quand tu passes la souris dessus ». L’élément du menu s’illumine au survol – exactement comme sur les sites web que tu connais.

À toi 💪

Transforme ton menu en vrai menu : une barre colorée sur toute la largeur de l’en-tête, des éléments côte à côte en forme de pilule, qui s’illuminent au survol. Prends les couleurs de ta palette de la leçon 6.

🏫 Site web d'école – solution (bleu)

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); }

🙋 Site web personnel – solution (orange)

Même code, change juste la couleur de l’en-tête :

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

🌍 Journal de voyage – solution (vert)

Même code, change juste la couleur de l’en-tête :

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

⚽ Site web de club – solution (couleur du club)

Même code, change juste la couleur de l’en-tête pour celle de ton club :

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

💡

Tu veux le nom à gauche et le menu à droite, sur une ligne ? Enveloppe l’en-tête dans un autre flexbox : ajoute header { display: flex; justify-content: space-between; align-items: center; }. La propriété space-between signifie « pousse les enfants à l’écart : le premier à gauche, le dernier à droite ».

✅

Vérifie : Il y a une barre colorée en haut de ton site web, avec un nom blanc et des éléments de menu en forme de pilule qui s’illuminent quand tu passes la souris dessus. Souviens-toi – comme le CSS est partagé, le menu a changé sur chaque page d’un coup.

Ce que tu retiens de cette leçon

display: flex aligne les enfants d’une boîte en rangée, gap met de l’espace entre eux.
justify-content et align-items alignent les choses, flex-wrap: wrap permet de passer à la ligne.
:hover = « quand la souris survole ». Un petit effet lumineux rend un site web vivant.

Montre-moi : des boîtes côte à côte

Montre-moi : un menu comme les vrais sites web

À toi 💪

Ce que tu retiens de cette leçon