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

Générateur CSS Flexbox

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

Traitement en cours... 0%

Résultat

Une mise en page flexbox a deux livres de règles distincts — les propriétés sur le conteneur (flex-direction, justify-content, align-items, flex-wrap, gap) et les propriétés sur chaque enfant (flex-grow, flex-shrink, flex-basis) — et les mélanger est la source la plus courante de bogues du type « pourquoi est-ce que ça ne centre / grandit / passe pas à la ligne comme prévu ». Ce générateur affiche les deux livres de règles en même temps : changez n'importe quelle commande du conteneur ou les champs propres d'un enfant et trois boîtes numérotées et codées en couleur se mettent à jour immédiatement, de sorte que la cause et l'effet restent visibles.

Le côté conteneur couvre chaque axe de mise en page : choisissez une direction, décidez comment les enfants sont répartis le long de l'axe principal avec justify-content, alignez-les sur l'axe secondaire, déterminez s'ils passent sur de nouvelles lignes, et définissez un écart au lieu d'astuces de marges entre eux. Le côté enfant est tout aussi réel : ajoutez des boîtes jusqu'à huit, supprimez jusqu'à deux, et donnez à n'importe laquelle d'entre elles ses propres valeurs 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 ces valeurs diffère de la valeur par défaut du navigateur, de sorte que le code copié ne s'encombre jamais de flex-grow: 0 sur des boîtes qui n'en ont pas besoin.

Les pages de préréglages vont directement aux mises en page que les gens recherchent par nom : comment centrer une div (la question de mise en page CSS la plus posée, résolue avec justify-content et align-items tous deux réglés sur center), une barre de navigation logo à gauche et liens à droite, des colonnes flexibles de largeur égale via flex-grow, et une comparaison côte à côte de space-between avec ses proches parentes space-around et space-evenly.

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

Vous appréciez cet outil ? Vous trouvez ce produit utile ? Vous y voyez du potentiel et souhaitez le soutenir ?

🛡️
Exécuté dans le navigateur

Vos fichiers et données ne quittent jamais cet appareil. Le traitement est entièrement hors connexion. 100 % sécurisé.

Formats acceptés et règles

  • Commandes du conteneur : flex-direction, justify-content, align-items, flex-wrap et un champ gap en pixels, appliquées en direct à l'aperçu.
  • Trois boîtes enfants codées en 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 possédant des propriétés flex non définies par défaut.

Principaux avantages

✓ Chaque commande du conteneur ainsi que les valeurs flex-grow, flex-shrink et flex-basis de chaque enfant mettent à jour en direct trois boîtes d'aperçu numérotées, ce qui vous permet de voir exactement l'effet de 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 des valeurs par défaut du CSS, ce qui garde le code copié court et lisible au lieu de répéter flex-grow: 0 sur chaque boîte.
✓ Les pages de préréglages proposent directement les mises en page que les gens recherchent par nom : centrer une div, une barre de navigation logo à gauche et liens à droite, et des colonnes flexibles de largeur égale — ouvrez-en une et l'outil est déjà configuré.

Cas d'utilisation

  • • Obtenez le code CSS exact pour centrer un bloc à la fois horizontalement et verticalement en voyant justify-content et align-items agir sur les boîtes de prévisualisation en direct.
  • • Créez une barre de navigation avec le logo à gauche et les liens à droite grâce à space-between et align-items: center, puis copiez le CSS du conteneur directement dans le composant d'en-tête de votre site.
  • • Comparez space-between, space-around et space-evenly côte à côte sur les trois mêmes boîtes au lieu de deviner lequel correspond à l'espacement que vous souhaitez.