Flex Rescue
Aligne les boutons sur une ligne avec display flex, gap et align-items.
Objectifs de la leçon
- Créer un conteneur flex
- Distinguer axe principal et axe secondaire
- Espacer les éléments avec gap
Comprendre le principe
À la fin de cette leçon, tu sauras créer un conteneur flex.
À la fin de cette leçon, tu sauras distinguer axe principal et axe secondaire.
À la fin de cette leçon, tu sauras espacer les éléments avec gap.
Groupe aligné
Les boutons deviennent des éléments flex, alignés et espacés par le parent.
display: flex crée le contexte.
gap gère l'espacement entre enfants.
Pourquoi éviter : Marges répétées
L'espacement dépend de chaque enfant et exige une exception.
Flexbox est idéal quand la question principale est : comment répartir ces éléments sur une ligne ou une colonne ?
Vocabulaire lié
- conteneur flex — Parent dont les enfants directs deviennent des éléments flex.
- axe principal — Direction définie par flex-direction.
- axe secondaire — Axe perpendiculaire à l'axe principal.
- gap — Espace constant entre les éléments.
Validation
- Je peux expliquer : Flexbox est idéal quand la question principale est : comment répartir ces éléments sur une ligne ou une colonne ?
- Je peux créer un conteneur flex.
- Je peux distinguer axe principal et axe secondaire.