Mode d'emploi
- Saisissez un Nom de classe pour le conteneur, comme barre-outils. Le CSS l'utilise comme sélecteur de classe.
- Choisissez flex-direction, flex-wrap et les valeurs d'alignement. Chacun affiche d'abord sa valeur initiale.
- Réglez Nombre d'éléments (de 1 à 12), puis le flex-grow, le flex-shrink et le flex-basis de chaque élément.
- Vérifiez l'Aperçu, puis copiez le CSS dans votre feuille de style, et mettez la classe sur le conteneur.
Les propriétés du conteneur
Le module CSS Flexible Box Layout du W3C (en anglais) place les enfants d'un conteneur flex le long d'un axe principal. flex-direction choisit cet axe, et flex-wrap choisit si les enfants peuvent passer sur une nouvelle ligne. justify-content répartit les enfants le long de l'axe principal, et align-items et align-content les placent sur l'axe transversal.
- flex-direction vaut row par défaut, et accepte row-reverse, column ou column-reverse.
- flex-wrap vaut nowrap par défaut, et accepte aussi wrap ou wrap-reverse.
- justify-content vaut flex-start par défaut, et align-items et align-content valent stretch.
Les propriétés des éléments
Chaque enfant du conteneur est un élément, et ses trois propriétés flex décident de la place qu'il reçoit. flex-grow vaut 0 par défaut et prend l'espace libre en proportion du facteur. flex-shrink vaut 1 par défaut et indique ce qu'un élément cède lorsque la place manque. flex-basis vaut auto par défaut, ce qui garde la taille naturelle de l'élément ; une longueur ou un pourcentage fixe d'abord une taille.
flex: flex-grow flex-shrink flex-basis; valeur initiale : 0 1 autoCe que l'outil n'écrit pas
- Les propriétés order, align-self et gap, que vous pouvez ajouter au conteneur ou à un élément à la main.
- Les éléments au-delà du douzième : l'outil s'arrête à 12 éléments, donc une liste plus longue demande d'écrire ses règles à la main.
Exemple détaillé : une barre d'outils qui revient à la ligne, avec trois éléments
Le nom de classe est barre-outils, flex-wrap vaut wrap, justify-content vaut space-between et align-items vaut center. Le premier élément garde les valeurs initiales, donc il n'a pas de règle. Le deuxième grandit pour occuper l'espace libre, avec une base de 0. Le troisième garde sa taille, avec une base de 200px. L'outil écrit une règle pour les deuxième et troisième éléments seulement.
| Élément | flex-grow | flex-shrink | flex-basis |
|---|---|---|---|
| 1 | 0 | 1 | auto |
| 2 | 1 | 1 | 0 |
| 3 | 0 | 0 | 200px |
Questions fréquentes
Quelle est la différence entre flex-grow et flex-basis ?
flex-basis est la taille dont part un élément avant que l'espace libre soit réparti. flex-grow décide ensuite de la façon dont l'espace libre est partagé, en proportion du facteur de chaque élément. Un élément dont la base vaut 0 et le grow 1 prend la place que laissent les autres.
Pourquoi le premier élément de l'exemple n'a-t-il pas de règle ?
Ses valeurs sont les valeurs initiales des propriétés : flex-grow 0, flex-shrink 1 et flex-basis auto. Le navigateur les utilise sans règle, si bien que l'outil n'écrit une règle que pour un élément qui s'en écarte.
Pourquoi align-items vaut-il stretch par défaut ?
Le module CSS Flexible Box Layout donne à align-items la valeur initiale stretch, si bien que les éléments remplissent l'axe transversal, sauf si vous choisissez une autre valeur. L'outil part de la même valeur, pour que le CSS corresponde à ce que fait un navigateur sans déclaration.
Pourquoi la base n'accepte-t-elle que px, rem, em et le pourcentage ?
Ce sont les unités que l'outil vérifie. Une base auto ou un 0 sans unité sont aussi acceptés. Les autres unités, comme vw, ne sont pas proposées ici : écrivez-les à la main si votre mise en page en a besoin.
Puis-je ajouter un espace entre les éléments ?
Pas avec cet outil, qui n'écrit que les propriétés du conteneur et les valeurs flex des éléments. Ajoutez la propriété gap à la règle du conteneur, à la main, après avoir copié le CSS.
Le CSS que je crée est-il envoyé quelque part ?
Non. L'aperçu et le CSS sont créés dans votre navigateur. Rien n'est stocké ni envoyé à notre serveur, donc copiez le CSS avant de quitter la page.
Sources
Chiffres et texte vérifiés pour la dernière fois le jeudi 12 novembre 2026.