Navbar flex
Separe le logo et les actions avec justify-content: space-between.
Objectifs de la leçon
- Utiliser justify-content
- Différencier distribution et espacement constant
- Construire une navbar stable
Comprendre le principe
À la fin de cette leçon, tu sauras utiliser justify-content.
À la fin de cette leçon, tu sauras différencier distribution et espacement constant.
À la fin de cette leçon, tu sauras construire une navbar stable.
Deux pôles
Les groupes occupent les extrémités tout en gardant un espace minimal.
Le parent définit l'axe.
space-between distribue l'espace restant.
Pourquoi éviter : Positionnement fragile
La valeur ne s'adapte ni au texte ni à la largeur de l'écran.
La distribution fonctionne bien lorsque la structure HTML exprime déjà les bons groupes.
Vocabulaire lié
- justify-content — Distribue les éléments sur l'axe principal.
- space-between — Place le premier et le dernier élément aux extrémités.
- distribution — Répartition de l'espace libre dans un conteneur.
Validation
- Je peux expliquer : La distribution fonctionne bien lorsque la structure HTML exprime déjà les bons groupes.
- Je peux utiliser justify-content.
- Je peux différencier distribution et espacement constant.