Résultats instantanés
Aucune donnée envoyée
Sans inscription
Le code apparaîtra ici.
🔒 Génération locale dans le navigateur.
Flexbox organise les éléments sur un axe principal et un axe secondaire à l’aide de quelques propriétés CSS.
Générez visuellement les propriétés CSS Flexbox principales et copiez le code obtenu. Configurez direction, alignement, justification et espacement pour obtenir rapidement un bloc Flexbox. Il est conçu pour obtenir, tester ou analyser une structure web directement dans le navigateur, avec un résultat visible qu’il reste possible de relire avant intégration.
Choisissez l’axe principal. Formule ou repère : flex-direction. Exemple : row ou column.
Alignez sur l’axe principal. Formule ou repère : justify-content. Exemple : space-between.
Alignez sur l’axe secondaire. Formule ou repère : align-items. Exemple : center.
Ajoutez un espace régulier. Formule ou repère : gap. Exemple : 16px.
À activer le modèle de mise en page Flexbox.
Le premier agit sur l’axe principal, le second sur l’axe secondaire.
Oui avec flex-direction: column.
Oui dans les navigateurs modernes.
Lorsque l’outil produit ou analyse du code, une configuration ou une structure technique, vérifiez toujours le résultat dans votre navigateur ou votre projet avant une utilisation en production.
Les navigateurs, moteurs ou environnements peuvent interpréter certaines structures différemment : un test dans le contexte final reste donc utile.
Retrouvez ici les réponses aux questions les plus courantes sur l’utilisation de cet outil.
Convertissez rapidement euros, dollars, livres sterling et autres devises avec le dernier taux de change disponible.
Entrez votre date de naissance pour calculer votre âge exact en années, mois et jours, votre nombre de jours vécus et le temps restant avant votre prochain anniversaire.
Comparez deux produits selon leur prix et leur quantité grâce à des barres visuelles de prix unitaire.
