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

Générateur de boîtes flexibles 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

Une mise en page flexbox comporte deux livres de règles distincts : propriétés sur le conteneur (flex-direction, justifier-contenu, align-items, flex-wrap, gap) et propriétés sur chaque enfant (flex-grow, flex-shrink, flex-basis) - et leur mélange est la source la plus courante de bogues "pourquoi ce centrage/croissance/enveloppement comme je l'attends". Ce générateur affiche les deux livres de règles en même temps : modifiez n'importe quel contrôle de conteneur ou les propres champs de n'importe quel enfant et trois cases numérotées et codées par couleur se mettent à jour immédiatement, de sorte que la cause et l'effet restent visibles.

Le côté conteneur couvre chaque axe de présentation : choisissez une direction, choisissez la manière dont les enfants sont répartis le long de l'axe principal avec justifier le contenu, alignez-les sur l'axe transversal, décidez s'ils s'enroulent sur de nouvelles lignes et définissez un espace au lieu de marges entre eux. Le côté enfant est tout aussi réel : ajoutez des boîtes jusqu'à huit, supprimez jusqu'à deux et donnez à chacune d'elles ses propres flex-grow, flex-shrink et flex-basis - le générateur n'imprime une règle CSS par enfant que lorsqu'au moins une de celles-ci diffère de la valeur par défaut du navigateur, de sorte que le code copié ne se remplit jamais de flex-grow: 0 sur les boîtes qui n'en ont pas besoin.

Les pages prédéfinies accèdent directement aux mises en page que les gens recherchent réellement par leur nom : comment centrer un div (la question de mise en page CSS la plus posée, résolue avec justifier le contenu et aligner les éléments tous deux définis au centre), une barre de navigation avec des liens gauche et droit, des colonnes flexibles de largeur égale via flex-grow et une comparaison côte à côte de l'espace entre les deux avec ses proches parents, l'espace autour et l'espace uniformément.

Comme tous les outils de ce site, le générateur est gratuit et fonctionne entièrement dans votre navigateur : pas de téléchargement, pas de compte, et il continue de fonctionner hors ligne une fois la page chargée.

🛡️
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é.