⭐ 0
🔍
Texte Image PDF & Docs Audio Musique Électronique Temps Utilitaires Validateurs Ésotérisme Jeux

Colonnes Flexbox de largeur égale – Générateur CSS

Créez visuellement une mise en page CSS flexbox : flex-direction, justification-content, align-items, flex-wrap et gap sur le conteneur, ainsi que flex-grow, flex-shrink et flex-basis par enfant, le tout avec un aperçu en direct et du CSS copiable.

Traitement... 0%

Résultat

Cette page ouvre le générateur avec flex-grow : 1 déjà défini sur les trois boîtes de prévisualisation. Observez-les : au lieu de se réduire pour s'adapter à leur contenu, chaque boîte revendique une part identique de l'espace restant dans la ligne, ce qui est la recette complète pour des colonnes flexibles de largeur égale : pas de largeur en pourcentage, pas de calc(), pas de calcul de pixels fixes à garder synchronisés.

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 manière, de sorte qu'ils finissent par avoir la même largeur, quel que soit leur nombre ou le contenu qu'ils contiennent. Ajoutez ou supprimez une case avec les contrôles ci-dessous et les colonnes restantes sont instantanément redistribuées pour rester égales : redimensionnez une fenêtre de navigateur sur cette mise en page en production et elle se comporte de la même manière.

C'est le modèle qui se cache derrière les grilles de cartes de hauteur égale, les colonnes du tableau de prix et les sections de pied de page uniformément divisées. Donnez plus d'espace à une colonne en élevant sa croissance flexible au-dessus des autres, ou copiez le bloc CSS ci-dessous exactement tel que généré pour une division égale et nette.

🛡️
Exécuté dans le navigateur

Vos fichiers et entrées ne quittent jamais cet appareil. Le traitement s'effectue entièrement hors ligne. 100 % sécurisé.

Formats & règles acceptés

  • Contrôles du conteneur : flex-direction, justification-content, align-items, flex-wrap et une entrée d'espace en pixels, appliqués en direct à l'aperçu.
  • Trois boîtes enfants codées par couleur par défaut (ajoutez jusqu'à huit, supprimez jusqu'à deux), chacune avec ses propres champs flex-grow, flex-shrink et flex-basis.
  • Bloc CSS copiable avec une règle .flex-container plus une règle .flex-item-N par enfant qui a des propriétés flex autres que celles par défaut.

Avantages clés

✓ Chaque contrôle de conteneur et chaque contrôle flex-grow, flex-shrink et flex-basis de chaque enfant mettent à jour trois zones d'aperçu numérotées en direct, afin que vous voyiez exactement ce que font vos règles flexbox avant de toucher une feuille de style.
✓ Le générateur n'imprime que les règles enfants qui diffèrent réellement des valeurs par défaut CSS, de sorte que le code copié reste court et lisible au lieu de reformuler flex-grow: 0 sur chaque case.
✓ Les pages prédéfinies résolvent les mises en page que les gens recherchent par nom : centrer un div, une barre de navigation logo-liens gauche-droite et colonnes flexibles de largeur égale - ouvrez-en une et l'outil est déjà configuré.

Cas d'utilisation

  • • Obtenez le CSS exact pour centrer un div à la fois horizontalement et verticalement en regardant justifier le contenu et aligner les éléments fonctionner sur les zones d'aperçu en direct.
  • • Créez une disposition de barre de navigation avec logo à gauche et liens à droite avec un espace entre les éléments et align-items: center, puis copiez le CSS du conteneur directement dans votre composant d'en-tête.
  • • Comparez l'espace entre, l'espace autour et l'espace uniformément côte à côte sur les trois mêmes cases au lieu de deviner laquelle correspond à l'espacement souhaité.