Conteneur Flex CSS
L’intro Flexbox a transformé les parents en conteneurs. Cette leçon reste sur le conteneur : choisir l’axe principal, répartir l’espace, aligner sur l’axe transversal et envelopper les lignes. La croissance d’item (flex-grow, flex-basis) attend Flex Items.
Une boîte à outils du conteneur flex
📊 Conteneur flex en un coup d’œil
| Propriété | Rôle au quotidien |
|---|---|
flex-direction |
Fixe l’axe principal : row, column ou variantes reverse |
justify-content |
Distribue les items le long de l’axe principal |
align-items |
Aligne les items sur l’axe transversal (une ligne) |
flex-wrap |
Autorise le passage à de nouvelles lignes |
align-content |
Range plusieurs lignes flex sur l’axe transversal |
gap |
Espace items (et lignes) sans bagarre de margins |
Souvenez-vous : justify voyage sur l’axe principal ; align sur l’axe transversal. Passez flex-direction à column et ces rôles tournent avec les axes.
flex-direction — choisir l’axe principal
Par défaut : row. Utilisez column pour des piles verticales comme des navs latérales ou groupes de formulaire. Les variantes reverse inversent l’ordre visuel — vérifiez que l’ordre de lecture reste sensé.
.stack {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
justify-content — répartition sur l’axe principal
Répartissez l’espace libre le long de l’axe principal : flex-start, center, flex-end, space-between, space-around, space-evenly. Les headers veulent souvent space-between.
.bar {
display: flex;
justify-content: space-around;
align-items: center;
gap: 0.5rem;
}
align-items — alignement sur l’axe transversal
Sur une seule ligne, align-items contrôle la hauteur/placement vertical en row (ou horizontal en column). stretch est la valeur par défaut ; center est la colle UI du quotidien.
.card-row {
display: flex;
align-items: center;
gap: 1rem;
min-height: 6rem;
}
Wrap et align-content
Avec flex-wrap: wrap, les items en trop forment de nouvelles lignes. align-content range ces lignes quand il reste de l’espace transversal libre — il fait peu si le wrap est nowrap.
.chip-board {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
gap: 0.5rem;
min-height: 8rem;
}
Une habitude de conteneur calme
Direction d’abord, puis justify, puis align-items, puis wrap si besoin. Gardez gap pour les gouttières. Réservez la croissance par item à la leçon suivante — et laissez les grilles 2D de page à CSS Grid plus tard.
.panel {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
À vous de jouer
- Créez un
.stackavecflex-direction: columnet trois blocs. - Comparez
justify-content: space-betweenvscentersur une barre large. - Augmentez
min-heightet testezalign-items: stretchvscenter. - Enveloppez des chips et regardez
align-content: flex-start. - Écrivez une phrase : quelles propriétés iront aux items ensuite, pas au conteneur ?
Erreurs fréquentes
- Inverser mentalement justify et align après un changement de direction
- Utiliser
row-reversesans vérifier l’ordre clavier/lecture - S’attendre à ce que
align-contentcompte avecnowrap - Mettre
flex-growsur le conteneur plutôt que sur un item - Demander aux props de conteneur Flexbox un layout Grid 2D complet
Résumé
- Les props du conteneur pilotent direction, distribution, alignement et wrap
flex-directiondéfinit l’axe principaljustify-contentvsalign-itemssuivent principal vs transversal- Le wrap active les paquets multilignes ;
align-contentrange ces lignes - La croissance au niveau item attend la leçon Flex Items
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut