Générateur de flexbox CSS
Créez visuellement un conteneur flex et ses éléments, puis copiez le CSS, les classes Tailwind ou le style inline.
Générateur de flexbox CSS
Définissez flex-direction, flex-wrap, justify-content, align-items et align-content à partir de menus déroulants, ajoutez un écart dans n'importe quelle unité, et cet outil écrit la règle du conteneur flex — ainsi qu'une règle correspondante pour ses éléments et un aperçu montrant comment les boîtes s'alignent. Utilisez-le pour esquisser une barre de navigation, une rangée de cartes, une barre d'outils de formulaire ou toute mise en page nécessitant une distribution, un centrage ou un enroulement d'éléments sans recourir à une grille complète.
Les contrôles d'éléments appliquent flex-grow, flex-shrink et flex-basis uniformément à tous les éléments que vous choisissez, ce qui est exactement le fonctionnement de la plupart des véritables rangées flex : une classe d'élément régissant plusieurs boîtes plutôt que des valeurs individuelles par boîte. Align-content n'apparaît dans la sortie que lorsque flex-wrap est défini sur wrap ou wrap-reverse, car les navigateurs l'ignorent sinon — l'outil n'imprime jamais une déclaration sans effet.
Choisissez le format de sortie qui correspond à votre façon de construire : du CSS pur pour une feuille de style, des classes d'utilitaire Tailwind (les crochets de valeur arbitraire couvrent les écarts et les bases qui ne s'alignent pas sur l'échelle d'espacement par défaut), ou un attribut de style inline pour un prototype rapide ou un balisage sûr pour les e-mails. Chaque valeur se met à jour au moment où vous modifiez une option, et l'aperçu de la mise en page se redessine — pas d'étape de compilation, pas de CSS externe à charger.
Tout s'exécute localement dans votre navigateur ; rien de ce que vous configurez ici n'est envoyé nulle part. Lorsque le CSS vous convient, copiez-le, téléchargez-le en tant que fichier .txt, ou renvoyez-le à l'entrée pour continuer à itérer avec un autre outil.