Générateur CSS Flexbox, gratuit

Comment utiliser

1. Définissez les propriétés du conteneur : configurez le conteneur flex, flex-direction, justify-content, align-items, flex-wrap et gap.
2. Ajoutez et configurez les éléments flex : ajoutez des éléments enfants et définissez flex-grow, flex-shrink, flex-basis, align-self et order individuellement.
3. Copiez le CSS : récupérez le CSS complet pour le conteneur et les éléments, prêt à utiliser dans votre projet.

Pourquoi utiliser le générateur Flexbox ?

Flexbox est l'outil essentiel pour une mise en page CSS monodimensionnelle, aligner des éléments en ligne ou en colonne avec des contrôles de répartition et d'alignement puissants. Mais les propriétés sont nombreuses et leurs interactions complexes : justify-content contre align-items, flex-grow contre flex-basis, axe principal contre axe transverse. Ce générateur interactif fournit un retour visuel instantané lorsque vous modifiez chaque propriété, ce qui en fait le moyen le plus rapide d'apprendre Flexbox et d'obtenir le CSS adapté à votre mise en page.

Fonctionnalités

• Aperçu interactif : faites glisser les éléments flex et activez les propriétés pour voir les changements en temps réel.
• Toutes les propriétés du conteneur : flex-direction, flex-wrap, justify-content, align-items, align-content et gap.
• Contrôle par élément : définissez flex-grow, flex-shrink, flex-basis, align-self et order individuellement pour chaque élément.
• Indicateurs d'axe visuels : l'axe principal et l'axe transverse sont mis en évidence pour renforcer le modèle conceptuel.
• Sortie CSS : CSS complet, prêt à copier, pour le conteneur et tous les éléments configurés.

Questions fréquentes

Quelle est la différence entre justify-content et align-items ?

justify-content distribue les éléments le long de l'axe principal (horizontal par défaut). align-items aligne les éléments le long de l'axe transverse (vertical par défaut). Quand flex-direction vaut column, les axes s'inversent, justify-content devient vertical et align-items devient horizontal.

Quand utiliser Flexbox ou CSS Grid ?

Utilisez Flexbox pour des mises en page monodimensionnelles, une rangée de boutons, une barre de navigation, une liste de cartes qui doivent passer à la ligne. Utilisez CSS Grid pour des mises en page bidimensionnelles où vous devez contrôler rangées et colonnes simultanément, comme une mise en page complète ou une grille de cartes complexe.

Que signifie flex: 1 ?

flex: 1 est un raccourci pour flex-grow: 1; flex-shrink: 1; flex-basis: 0%. Cela indique à l'élément de grandir pour remplir l'espace disponible, de rétrécir si besoin, et de partir de zéro avant de répartir l'espace. Tous les éléments avec flex: 1 se partagent l'espace équitablement.

Ce que Flexbox fait vraiment

Flexbox (Flexible Box Layout) est un modèle de mise en page CSS conçu pour distribuer l’espace et aligner les éléments dans une direction à une dimension : soit une ligne, soit une colonne. Il introduit deux concepts fondamentaux qui déterminent comment tout se comporte : l’axe principal (la direction primaire dans laquelle les éléments s’écoulent, horizontale par défaut) et l’axe transversal (perpendiculaire à l’axe principal, vertical par défaut). Une fois que vous avez intériorisé principal vs transversal, chaque propriété Flexbox correspond à l’un d’entre eux : justify-content fonctionne sur l’axe principal, align-items fonctionne sur l’axe transversal, flex-direction échange quel axe est lequel.

Flexbox a résolu un ensemble de problèmes de mise en page qui ont tourmenté les développeurs web de 1998 à 2014. Avant Flexbox, centrer un élément verticalement nécessitait des hacks (display: table-cell, marges négatives, position: absolute avec des transformations translate). Les colonnes de hauteur égale nécessitaient la technique des « fausses colonnes » avec des images d’arrière-plan. Les pieds de page collants nécessitaient des calculs précis en pixels. Flexbox a rendu tout cela trivial : une déclaration d’une ligne remplace des décennies de contournements CSS. Le compromis est que Flexbox est à une dimension ; pour les mises en page à deux dimensions (ligne ET colonne simultanément), CSS Grid (livré en 2017) est le meilleur outil.

Les propriétés Flexbox se divisent proprement en deux groupes : propriétés du conteneur (appliquées au parent : display: flex, flex-direction, flex-wrap, justify-content, align-items, align-content, gap) et propriétés des éléments (appliquées aux enfants : flex-grow, flex-shrink, flex-basis, align-self, order). Les propriétés du conteneur contrôlent les motifs de mise en page ; les propriétés des éléments contrôlent les exceptions individuelles. Ce générateur fait apparaître les deux ensembles afin que vous puissiez expérimenter comment ils interagissent sans écrire de code.

Comment cet outil fonctionne en coulisses

L’aperçu en direct est un conteneur flex avec des éléments enfants d’exemple. Lorsque vous modifiez les propriétés du conteneur (flex-direction, justify-content, etc.) via des listes déroulantes et des entrées, JavaScript met à jour le style inline du conteneur d’aperçu, et le navigateur re-rend la mise en page. L’aperçu est l’implémentation Flexbox réelle du navigateur, pas une simulation JavaScript : vous voyez exactement ce que votre CSS produira sur une vraie page.

Les contrôles par élément vous permettent d’ajuster chaque enfant individuellement. Vous pouvez ajouter ou supprimer des éléments, définir leurs valeurs flex-grow, flex-shrink, flex-basis, align-self et order, et voir comment le conteneur redistribue l’espace en conséquence. Les indicateurs d’axe visuels montrent les axes principal et transversal pour la configuration actuelle, renforçant le modèle mental. Les propriétés sont du vrai CSS que vous pouvez copier directement dans votre feuille de style, pas de transpilation ou de préfixes de framework nécessaires.

Le panneau CSS généré se met à jour à chaque interaction, produisant deux règles CSS : une pour le conteneur (avec les propriétés flex choisies) et une pour les éléments. Cliquez sur Copier CSS et les règles sont écrites dans votre presse-papiers. L’outil lui-même ne fait jamais de requêtes réseau ; le rendu d’aperçu, la génération de code et l’écriture au presse-papiers se produisent tous en JavaScript sur votre appareil. Rafraîchissez la page et votre configuration est partie sauf si vous avez copié le CSS d’abord.

Brève histoire de Flexbox

• Chaos de mise en page CSS 2.1, 1998 à 2008.Avant Flexbox, les développeurs web utilisaient float: left avec des hacks clearfix, display: inline-block avec des bugs d’espace blanc, ou display: table avec des astuces table-cell pour la mise en page. Le centrage vertical nécessitait vertical-align sur les table-cells, des astuces de marge négative, ou un positionnement absolu. Les colonnes égales nécessitaient du JavaScript. La communauté web génère des milliers d’articles de blog sur « comment faire X avec CSS ».
• Première version de Flexible Box, 2009.Le W3C CSS Working Group publie le premier Working Draft du CSS Flexible Box Layout Module en juillet 2009, avec trois syntaxes évoluant au cours des cinq années suivantes : la syntaxe box-* originale (rapidement obsolète), la syntaxe intermédiaire flexbox de 2011 (encore visible dans le code IE 10 hérité) et la syntaxe flex finale que nous utilisons aujourd’hui.
• Le support des navigateurs se stabilise, 2014.Chrome 29, Firefox 28, Safari 9 et IE 11 livrent tous Flexbox fonctionnel d’ici 2014, IE 11 conservant des cas limites bugués. La transition de « Flexbox est l’avenir » à « Flexbox est le présent » se produit en 2014-2015 alors que les sites de production l’adoptent pour les mises en page majeures. Le « Holy Grail Layout » (en-tête, pied de page, deux barres latérales, contenu principal) devient trivial.
• « A Complete Guide to Flexbox » de Chris Coyier, 2013.CSS-Tricks publie le guide Flexbox complet de Chris Coyier (avril 2013), qui devient la référence canonique. D’ici 2016, le guide figure parmi les meilleurs résultats pour toute question Flexbox et est traduit dans des dizaines de langues. Il accélère dramatiquement l’adoption de Flexbox.
• CSS Grid arrive en complément, 2017.CSS Grid Layout est livré dans Chrome 57, Firefox 52 et Safari 10.1 (mars 2017). Loin de remplacer Flexbox, Grid le complète : Flexbox excelle dans les mises en page à une dimension ligne/colonne, Grid excelle dans les mises en page à deux dimensions. Les designs modernes utilisent généralement les deux : Grid pour la structure au niveau de la page, Flexbox pour les arrangements internes des composants (éléments de navigation, groupes de boutons, contenu de carte).
• La propriété gap et subgrid atterrissent, 2020 à 2024.La propriété gap (à l’origine uniquement pour Grid) devient compatible avec Flexbox dans tous les principaux navigateurs d’ici Safari 14.1 (avril 2021). La syntaxe plus propre gap: 1rem remplace les anciens motifs « marge sur chaque enfant sauf le dernier ». CSS Subgrid (2023+) permet aux grilles imbriquées de s’aligner avec les pistes de grille parentes, utile pour les mises en page de systèmes de composants.

Flux du monde réel

• Barres de navigation.Une navigation horizontale avec le logo à gauche et les liens à droite est le cas d’utilisation canonique de Flexbox. display: flex; justify-content: space-between; align-items: center; sur le conteneur de nav, et c’est fait. Ajoutez gap: 1.5rem pour l’espacement entre les liens. Ce CSS de 4 lignes remplace ce qui nécessitait autrefois des floats, du clearfix et des calculs de marge au pixel près.
• Centrage vertical et horizontal.La question classique « comment centrer ce div ? » a une réponse Flexbox : display: flex; justify-content: center; align-items: center; sur le parent. Fonctionne quelle que soit la taille intrinsèque de l’enfant, quelle que soit la hauteur du parent, quels que soient les changements de contenu dynamiques. C’est la plus grande amélioration de la qualité de vie que Flexbox a apportée au développement web.
• Mises en page de liste de cartes avec retour à la ligne.Une ligne de cartes qui passe à plusieurs lignes sur les écrans étroits : display: flex; flex-wrap: wrap; gap: 1rem; sur le conteneur, et flex: 1 1 250px sur chaque carte. Les cartes grandissent pour remplir l’espace disponible, rétrécissent jusqu’à 250px minimum et passent à de nouvelles lignes quand 250px ne tient pas. Design responsive sans media queries.
• Lignes de formulaire avec entrées étiquetées.Les formulaires nécessitent souvent que les étiquettes et les entrées soient alignées : display: flex; gap: 0.5rem; sur la ligne, flex: 0 0 120px sur l’étiquette (largeur fixe de 120px), flex: 1 sur l’entrée (remplit l’espace restant). Redimensionner le conteneur de formulaire garde l’étiquette fixe et étire l’entrée. Plus facile que CSS Grid pour les lignes de formulaire à deux colonnes.
• Pieds de page collants.Faire que le pied de page colle au bas de la fenêtre quand le contenu est court, mais suive le contenu quand il est long : body { display: flex; flex-direction: column; min-height: 100vh; } avec main { flex: 1 } pousse le pied de page vers le bas. Le problème classique du « pied de page collant » résolu en trois déclarations CSS, remplaçant les contournements de marge négative des années 2010.
• Groupes d’étiquettes et de badges.Listes d’étiquettes, puces ou badges qui devraient s’écouler horizontalement et passer à de nouvelles lignes : display: flex; flex-wrap: wrap; gap: 0.5rem;. Chaque étiquette se dimensionne elle-même, et le conteneur gère l’arrangement. Beaucoup utilisé dans les UIs de filtrage, l’étiquetage de contenu, les interfaces de recherche. Se combine bien avec le sélecteur :has() pour le style dépendant de l’état.

Pièges courants et ce qu’ils signifient

• Le piège min-width: auto.Les éléments flex ont une min-width: auto implicite (ou min-height: auto pour les directions de colonne) qui les empêche de rétrécir en dessous de la taille minimale intrinsèque de leur contenu. Cela fait échouer de manière inattendue les motifs overflow: hidden et de troncature de texte dans les conteneurs flex. Solution : définir explicitement min-width: 0 sur l’élément flex problématique. C’est la cause la plus courante de « pourquoi ma mise en page flex est cassée ? ».
• Confusion flex-basis vs width.flex-basis est la taille initiale d’un élément flex le long de l’axe principal, avant les calculs de croissance/rétrécissement. width (ou height pour les directions de colonne) est la taille CSS régulière. Quand les deux sont définis, flex-basis gagne. Le raccourci flex: 1 1 200px définit flex-basis à 200px. Pour la plupart des cas, préférez flex-basis à width à l’intérieur des conteneurs flex pour la clarté.
• Support de gap dans les anciens navigateurs.La propriété gap était à l’origine uniquement pour Grid et est arrivée dans Flexbox plus récemment : Safari 14.1 (avril 2021), et plus tôt dans Chrome/Firefox. Pour les projets supportant les anciens Safari (ou les anciens WebView dans les applications iOS), fournissez des fallbacks utilisant les marges sur les enfants. La plupart des projets modernes peuvent utiliser gap en toute sécurité ; vérifiez vos cibles de support de navigateur spécifiques.
• Le flex-shrink par défaut peut causer des dimensionnements inattendus.Les éléments flex par défaut à flex-shrink: 1, ce qui signifie qu’ils peuvent rétrécir en dessous de leur largeur déclarée si le conteneur est trop étroit. Pour garder un élément à sa largeur déclarée quelle que soit l’espace disponible, définissez flex-shrink: 0. Courant avec les barres latérales qui devraient rester à 250px de large même quand la zone de contenu principal les pousse : flex: 0 0 250px au lieu de flex-basis: 250px.
• Le flex-basis en pourcentage est relatif au conteneur.flex-basis: 50% signifie « 50% de la taille de l’axe principal du conteneur flex ». Cela fonctionne pour les mises en page typiques mais interagit étrangement avec flex-wrap : si le conteneur lui-même a une taille d’axe principal basée sur un pourcentage dans un contexte flex imbriqué, les mathématiques se composent. En cas de doute, utilisez des valeurs en pixels ou min()/max()/clamp() pour flex-basis au lieu de pourcentages.
• Le Flexbox d’IE 11 a des cas limites bugués.Internet Explorer 11 (retiré en juin 2022) a implémenté Flexbox avec plusieurs bugs : min-height non respecté, conteneurs flex imbriqués cassés, flex: 1 traitant parfois flex-basis comme 0px au lieu de 0%, le raccourci « flex à deux valeurs » géré de manière incohérente. Pour les projets ne supportant plus IE, ignorez. Pour les logiciels d’entreprise hérités, testez soigneusement ou utilisez des approches de mise en page alternatives.

Confidentialité : tout s’exécute dans votre navigateur

Les outils d’apprentissage et de mise en page CSS viennent en deux saveurs : pages HTML simples exécutant du JavaScript côté client (privées, rapides, pas de setup) et éditeurs cloud avec projets sauvegardés (collaboratifs mais avec compromis de confidentialité). Cet outil est du premier type. Vos sélections de propriété, vos configurations d’éléments, votre CSS généré : tout reste dans votre session navigateur. Rafraîchissez la page et l’état est parti sauf si vous avez copié le CSS d’abord.

Les enjeux de confidentialité sont faibles ici parce que les configurations Flexbox contiennent rarement des informations sensibles. Néanmoins, l’absence d’analytique compte : vous pouvez expérimenter librement sans que votre processus d’essai-erreur soit enregistré. Particulièrement utile dans des contextes de classe ou de formation d’entreprise où faire enregistrer les étudiants ou stagiaires sur des plateformes tierces est un point de friction. L’outil est une page statique unique sans backend, utilisable dans n’importe quel navigateur, y compris les machines d’entreprise verrouillées.

Quand un autre outil est le bon choix

• CSS Grid pour les mises en page à deux dimensions.Flexbox est à une dimension ; si vous devez aligner les éléments à la fois en lignes et en colonnes simultanément (par ex. une mise en page de style magazine avec des cartes de tailles mixtes), CSS Grid est dramatiquement mieux adapté. Utilisez notre CSS Grid Generator pour ce type de travail. Les deux fonctionnent très bien ensemble : Grid pour la structure au niveau de la page, Flexbox pour les arrangements internes des composants.
• Tableaux HTML pour les données tabulaires.Si vos données sont en réalité un tableau (lignes représentant des enregistrements, colonnes représentant des champs), utilisez un vrai élément <table> avec <tr> et <td>. Les tableaux fournissent un sens sémantique aux lecteurs d’écran, des en-têtes triables et un alignement intégré. Flexbox/Grid pour les tableaux est un antipattern de l’ère 2010 ; les directives modernes d’accessibilité recommandent explicitement les tableaux HTML sémantiques pour les données tabulaires.
• position: absolute pour les superpositions et infobulles.Les superpositions modales, infobulles, menus déroulants et éléments UI flottants similaires fonctionnent mieux avec position: absolute ou position: fixed plutôt qu’avec Flexbox. Flex/Grid gèrent le flux de mise en page ; le positionnement absolu sort les éléments du flux entièrement. Combinez-les : Flexbox pour la mise en page principale de la page, positionnement absolu pour le modal qui la recouvre.
• CSS Subgrid pour l’alignement imbriqué.Quand les mises en page imbriquées doivent s’aligner avec la grille du parent (par ex. les titres de cartes s’alignant tous à travers une grille de cartes), CSS Subgrid (Firefox 71 2019, Chrome 117 2023, Safari 16 2022) est plus approprié que Flexbox imbriqué. Subgrid permet aux enfants d’hériter des pistes de grille du parent, assurant un alignement parfait à travers les structures imbriquées. Vaut la peine d’apprendre pour le travail de composants de systèmes de design.

Autres questions fréquentes

Que signifie exactement le raccourci flex ?

Le raccourci flex définit trois propriétés à la fois : flex: <grow> <shrink> <basis>. Valeurs courantes : flex: 1 (1, 1, 0%) pour les éléments de distribution égale, flex: 0 0 auto pour les éléments de taille fixe, flex: 1 1 250px pour les éléments qui grandissent/rétrécissent à partir d’un point de départ de 250px. Le raccourci a des valeurs initiales spéciales quand seulement une ou deux valeurs sont fournies ; la forme explicite à trois valeurs évite les surprises.

Comment faire passer les éléments à plusieurs lignes ?

Définissez flex-wrap: wrap sur le conteneur. Les éléments débordent vers une nouvelle ligne lorsqu’ils ne tiennent pas. Combinez avec flex-basis sur les éléments pour contrôler combien tiennent par ligne : flex: 1 1 200px crée une grille responsive où les éléments font au moins 200px, grandissent pour remplir l’espace restant et passent à de nouvelles lignes sur les écrans étroits. La propriété gap du conteneur gère l’espacement entre les lignes et les éléments enveloppés.

Puis-je inverser l’ordre des éléments flex ?

Oui, plusieurs façons. Au niveau du conteneur : flex-direction: row-reverse (ou column-reverse) inverse tous les éléments en ordre. Au niveau de l’élément : la propriété order attribue des poids numériques ; les éléments avec des nombres plus bas apparaissent en premier. L’ordre par défaut est 0 ; définir order: -1 sur un élément le déplace au début. Note d’accessibilité : la réorganisation visuelle n’affecte pas l’ordre de tabulation ou l’ordre de lecture du lecteur d’écran, ce qui peut dérouter les utilisateurs de clavier et de technologies d’assistance. Utilisez avec parcimonie.

Quelle est la différence entre align-items et align-content ?

align-items aligne les éléments dans leur ligne (ou colonne) le long de l’axe transversal. align-content aligne les lignes (ou colonnes) elles-mêmes dans le conteneur, ne sont significatives que lorsqu’il y a plusieurs lignes enveloppées. Si flex-wrap est défini sur nowrap (par défaut), align-content n’a aucun effet car il n’y a qu’une seule ligne. Utilisez align-items pour l’alignement à une seule ligne, align-content pour l’alignement multi-ligne.

Comment centrer un seul élément avec Flexbox ?

La réponse classique : display: flex; justify-content: center; align-items: center; sur le conteneur parent. Cela centre l’enfant à la fois horizontalement et verticalement. Pour juste horizontal : utilisez seulement justify-content: center. Pour juste vertical : utilisez seulement align-items: center. Si vous devez centrer dans un parent de hauteur inconnue, ajoutez min-height: 100vh au parent afin qu’il ait un espace vertical pour centrer. Tout le motif remplace 20 ans de contournements de centrage CSS.

Pourquoi ma troncature de texte ne fonctionne-t-elle pas dans un conteneur flex ?

À cause du défaut min-width: auto sur les éléments flex. Text-overflow: ellipsis nécessite que l’élément déborde réellement de son conteneur ; avec la largeur minimale par défaut définie à la taille intrinsèque du contenu, l’élément ne déborde jamais. Solution : ajoutez min-width: 0 à l’élément flex contenant le texte à tronquer. C’est le bug Flexbox le plus courant des réponses Stack Overflow : rechercher « flex text-overflow ellipsis not working » renvoie des milliers de versions de cette réponse exacte.