Apprends CSS Flexbox pour créer des mises en page unidimensionnelles puissantes. Maîtrise les conteneurs flex, la direction, l'alignement, le retour à la ligne et la propriété gap pour construire des modèles d'interface utilisateur responsive facilement.
Flexbox est un système de mise en page unidimensionnel qui te permet de distribuer l'espace et d'aligner les éléments le long d'un seul axe — soit une ligne, soit une colonne.
Pour commencer à utiliser Flexbox, définis display: flex sur un élément conteneur. Tous les enfants directs de ce conteneur deviennent automatiquement des éléments flex.
.container {
display: flex;
}Par défaut, les éléments flex sont disposés en ligne (de gauche à droite) et ils essaient de tenir sur une seule ligne. Chaque élément est dimensionné en fonction de son contenu, mais Flexbox te donne des contrôles puissants pour changer ce comportement.
Concepts clés :
flex-direction contrôle la direction de l'axe principal : row (par défaut), row-reverse, column, ou column-reverse..container {
display: flex;
/* Align items along the MAIN axis */
justify-content: center;
/* Options: flex-start | flex-end | center |
space-between | space-around | space-evenly */
/* Align items along the CROSS axis */
align-items: center;
/* Options: stretch | flex-start | flex-end |
center | baseline */
/* Allow items to wrap onto multiple lines */
flex-wrap: wrap;
/* Add spacing between items */
gap: 16px;
}La propriété raccourcie flex sur les éléments flex contrôle comment ils grandissent, rétrécissent et leur taille de base. Elle combine trois propriétés :
.item {
flex: <flex-grow> <flex-shrink> <flex-basis>;
}flex-grow — À quel point l'élément devrait grandir par rapport à ses frères et sœurs quand de l'espace supplémentaire est disponible. 0 signifie ne pas grandir ; 1 signifie prendre une part égale.flex-shrink — À quel point l'élément devrait rétrécir quand l'espace est limité. 0 signifie ne pas rétrécir.flex-basis — La taille initiale avant de grandir ou rétrécir. Peut être une longueur (200px) ou auto.Valeurs raccourcies courantes :
.item { flex: 1; } /* grow: 1, shrink: 1, basis: 0% — dimensionnement égal */
.item { flex: 0 0 200px; } /* fixé à 200px, pas de croissance ou rétrécissement */
.item { flex: 2 1 auto; } /* grandit deux fois plus vite, rétrécit normalement */Utiliser flex: 1 sur tous les éléments est un moyen rapide de leur faire partager l'espace disponible de manière égale.
Quelle propriété contrôle l'espacement entre les éléments flex sans ajouter de marge aux éléments eux-mêmes ?