Générateur de CSS Flexbox
Outil gratuit pour expérimenter des mises en page Flexbox en ajustant flex-direction, justify-content, align-items, flex-wrap et gap avec un aperçu en temps réel. Copiez le code CSS généré en un clic.
Astuces
- justify-content aligne les éléments selon "l'axe principal", tandis qu'align-items les aligne selon "l'axe secondaire". En passant flex-direction à column, l'axe principal devient vertical, ce qui inverse l'effet visuel de ces deux propriétés.
- Le préréglage "Centré" combine justify-content: center et align-items: center, la méthode la plus courante pour centrer un élément à la fois horizontalement et verticalement avec Flexbox.
- La propriété gap n'ajoute de l'espace qu'entre les éléments, pas autour du conteneur ; contrairement à margin, elle crée donc un espacement uniforme entre éléments voisins sans affecter les bords.
- Définir align-self sur un seul élément remplace l'align-items du conteneur uniquement pour cet élément, ce qui est utile pour mettre en valeur un élément avec un alignement différent des autres.
- Activer flex-wrap: wrap permet aux éléments qui ne tiennent plus dans la largeur du conteneur (ou la hauteur, en mode colonne) de passer automatiquement à la ligne suivante, une technique courante pour les mises en page de cartes responsives.
Questions fréquentes
Anecdote — Comment Flexbox a changé l'histoire de la mise en page CSS
Avant l'arrivée de CSS Flexbox (officiellement CSS Flexible Box Layout Module), les mises en page horizontales sur le web étaient généralement construites avec la propriété float. Or float avait été conçue à l'origine pour faire en sorte que le texte s'enroule autour d'une image, pas pour créer des mises en page ; son utilisation à cette fin nécessitait donc de nombreux contournements, le plus célèbre étant l'astuce "clearfix" pour empêcher la hauteur d'un élément parent de s'effondrer.
Flexbox, dont le premier brouillon a été publié par le W3C en 2009, a été conçu spécifiquement pour les mises en page unidimensionnelles. Des tâches qui nécessitaient auparavant plusieurs lignes d'astuces CSS avec float — étirer des éléments le long de l'axe principal, répartir l'espace uniformément ou centrer du contenu verticalement — pouvaient désormais s'exprimer avec une seule propriété déclarative comme justify-content ou align-items.
Lorsque les principaux navigateurs ont achevé leur implémentation de Flexbox vers 2015, celui-ci est rapidement devenu le moyen standard de réaliser des motifs courants du design web, tels que les barres de navigation, les mises en page en cartes et l'alignement des formulaires. À l'époque, la communauté des développeurs front-end a particulièrement salué le fait que le centrage vertical, longtemps considéré comme l'un des problèmes les plus épineux du CSS, ait enfin trouvé une solution simple.
Aujourd'hui, Flexbox coexiste avec CSS Grid, spécialisé dans les mises en page bidimensionnelles, chacun jouant un rôle différent : Flexbox pour disposer des composants selon une seule direction, et Grid pour structurer la page entière comme une grille.