Phase 3 — Mise en page
#10 Flexbox
flex-direction, justify, align, gap
Qu'est-ce que Flexbox ?
Flexbox est un système de mise en page unidimensionnel pour disposer les éléments en lignes ou en colonnes. Il excelle dans la distribution d'espace et l'alignement.
Propriétés du conteneur
Conteneur flex
.conteneur {
display: flex;
flex-direction: row; /* row | column | row-reverse */
flex-wrap: wrap; /* nowrap | wrap */
justify-content: center; /* Alignement axe principal */
align-items: center; /* Alignement axe transversal */
gap: 16px; /* Espace entre les éléments */
}Propriétés des éléments
Éléments flex
.element {
flex-grow: 1; /* Grandir pour remplir (0 = ne pas grandir) */
flex-shrink: 0; /* Ne pas rétrécir */
flex-basis: 200px; /* Taille initiale */
/* Raccourci */
flex: 1; /* flex: 1 1 0% */
flex: 0 0 auto; /* Ne pas grandir ni rétrécir */
flex: 1 0 200px; /* Grandir à partir de 200px */
align-self: center; /* Surcharger align-items du conteneur */
order: -1; /* Réordonner visuellement */
}Patterns courants
Barre de navigation
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
}Centrage parfait
.center {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}À vous de jouer
Essayez les commandes Flexbox ci-dessous :
terminal — browser