Flexbox CSS
Les composants de page ont esquissé coques, barres, menus et galeries. Flexbox est la façon moderne d’aligner des éléments dans une direction — rangée ou colonne — avec moins de tracas de float. Activez display: flex, rencontrez les flex items, puis approfondissez dans les prochaines leçons Flexbox.
Une boîte à outils de démarrage Flexbox
📊 Flexbox en un coup d’œil
| Idée | Travail quotidien |
|---|---|
| Conteneur flex | Parent avec display: flex (ou inline-flex) |
| Items flex | Enfants directs qui participent au layout flex |
| Axe principal | Direction primaire de parcours des items (rangée par défaut) |
| Axe transversal | La direction perpendiculaire pour l’alignement |
gap |
Espace intégré entre les items |
| Prochaines leçons | Props conteneur, props item, motifs flex responsives |
Flexbox est le plus fort en une dimension. Pour les grilles de page bidimensionnelles complètes, le module Grid arrive après cette piste Flexbox.
Activez un conteneur flex
Mettez display: flex sur le parent. Les enfants deviennent des flex items et s’assoient en rangée par défaut.
.toolbar {
display: flex;
align-items: center;
}
.toolbar .btn {
padding: 0.5rem 0.75rem;
}
Gap plutôt que batailles de margin
gap espace les items sans tours de collapse. Préférez-le pour des gouttières régulières entre enfants flex.
.toolbar {
display: flex;
gap: 0.75rem;
align-items: center;
}
Écartez les items sur l’axe principal
justify-content répartit l’espace libre le long de l’axe principal. space-between est un motif d’en-tête classique : marque à gauche, actions à droite.
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
Centrez sur l’axe transversal — et sur les deux
align-items: center aligne les items sur l’axe transversal. Associez-le à justify pour un groupe calme centré dans une boîte.
.hero-actions {
display: flex;
justify-content: center;
align-items: center;
gap: 0.75rem;
min-height: 4rem;
}
Repliez quand la rangée manque de place
flex-wrap: wrap laisse les items passer à la ligne suivante — vous l’avez déjà entrevu dans la galerie. La leçon Flex Responsive ira plus loin.
.chip-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
Une habitude Flexbox calme
Utilisez Flexbox pour des rangées et colonnes unidimensionnelles : navs, barres d’outils, rangées de cartes, centrage. Apprenez ensuite les détails du conteneur, puis croissance/réduction des items, puis flex responsive. N’attendez pas que Flexbox seul remplace chaque layout Grid.
.cluster {
display: flex;
gap: 0.75rem;
align-items: center;
}
.cluster__main { /* grows later with flex item props */ }
.cluster__meta { /* stays compact */ }
Essayez vous-même
- Créez un
.toolbaravecdisplay: flexet trois boutons. - Ajoutez
gapetalign-items: center. - Construisez un en-tête avec
justify-content: space-between. - Centrez une paire de boutons dans une boîte avec justify + align.
- Notez quelle leçon à venir couvrira les idées
flex-grow/flex-basis.
Erreurs courantes
- Saupoudrer
display: flexsur chaque enveloppe sans objectif de layout - Attendre de Flexbox un comportement de Grid 2D complet
- Combattre l’espacement avec des margins aléatoires au lieu de
gap - Sauter les prochaines leçons et mémoriser seulement cette intro
- Rester pour toujours sur des rangées float quand une rangée flex est plus claire
Résumé
- Flexbox dispose les items le long d’un axe principal
display: flexcrée un conteneur ; les enfants sont des flex itemsgap,justify-contentetalign-itemsdébloquent les rangées du quotidien- Le wrap donne un aperçu des rangées responsives ; la suite vient plus tard
- Les leçons conteneur, item et Flexbox responsive approfondissent le modèle ensuite
🧠 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