Colonnes flexbox de largeur égale — Générateur CSS
Créez visuellement une mise en page CSS flexbox : flex-direction, justify-content, align-items, flex-wrap et gap sur le conteneur, plus flex-grow, flex-shrink et flex-basis par enfant, le tout avec un aperçu en direct et un CSS copiable.
Entièrement traité dans votre navigateur — rien de ce que vous saisissez ici n'est jamais téléchargé.
Résultat
À propos de cet outil
Cette page ouvre le générateur avec flex-grow: 1 déjà défini sur les trois boîtes d'aperçu. Observez-les : au lieu de se réduire à la taille de leur contenu, chaque boîte réclame une part identique de l'espace restant dans la rangée, ce qui constitue toute la recette pour des colonnes flexibles de largeur égale — pas de largeurs en pourcentage, pas de calc(), pas de calculs en pixels fixes à maintenir en cohérence.
flex-grow: 1 indique à un enfant de grandir, et le définir sur chaque enfant de la rangée signifie qu'ils grandissent tous de la même quantité, de sorte qu'ils finissent par avoir la même largeur, quel que soit leur nombre ou le contenu qu'ils renferment. Ajoutez ou supprimez une boîte avec les commandes ci-dessous et les colonnes restantes se redistribuent instantanément pour rester égales — redimensionnez une fenêtre de navigateur sur cette mise en page en production et elle se comporte de la même façon.
C'est le motif qui sous-tend les grilles de cartes de hauteur égale, les colonnes de tableaux de prix et les sections de pied de page réparties uniformément. Donnez plus d'espace à une colonne en augmentant son flex-grow par rapport aux autres, ou copiez le bloc CSS ci-dessous tel qu'il est généré pour une répartition égale propre.