Les pubs vous déplaisent ? Aller Sans pub Auj. 

Générateur de CSS Flexbox (Visuel)

CouleurPromoteur

ANNONCE · Supprimer ?

SAISIR

Processus automatique

Propriétés du conteneur

flex-direction

justify-content

align-items

flex-wrap

align-content

S'applique uniquement lorsque les éléments se répartissent sur plusieurs lignes.

Espacement (px)

Éléments

Nombre d'éléments

Cliquez sur un élément dans la prévisualisation pour modifier ses propriétés.

SORTIR

Côté client

ANNONCE · Supprimer ?

Guide

Générateur de CSS Flexbox (Visuel)

Concevez des layouts Flexbox visuellement et copiez du CSS prêt à l'emploi. Ajustez la direction, l'alignement, le wrapping, le gap et les surcharges par élément tout en ayant une prévisualisation en temps réel qui se met à jour instantanément. Aucune hypothèse, aucune visite dans Chrome DevTools — choisissez simplement le comportement du conteneur que vous avez besoin, observez-le se rendre, et obtenez les règles générées.

Comment utiliser

Choisissez un flex-direction (row, row-reverse, column, column-reverse) pour définir l'axe principal.
Choisir justify-content et align-items pour la manière dont les enfants s'alignent le long de chaque axe.
Activer flex-wrap si les éléments doivent passer à une nouvelle ligne — align-content apparaîtra pour le contrôle multi-ligne.
Définissez le gap en pixels pour espacer les éléments sans marges.
Modifier la quantité d'éléments pour ajouter ou supprimer des enfants Flex (1–12).
Cliquez sur n'importe quel élément dans la prévisualisation en temps réel pour ouvrir l'éditeur par élément et ajuster flex-grow, flex-shrink, flex-basis, align-self, ou order.
Copiez le CSS généré et insérez-le dans votre feuille de style.

Caractéristiques

Prévisualisation en temps réel – Voir le conteneur et les éléments se réorganiser instantanément lorsque vous modifiez les propriétés.
Contrôles complets du conteneur – flex-direction, justify-content, align-items, flex-wrap, align-content et gap.
Surcharges par élément – Cliquez sur un élément pour modifier flex-grow, flex-shrink, flex-basis, align-self et order sans chercher dans DevTools.
Compteur dynamique d'éléments – Ajoutez ou supprimez des enfants Flex entre 1 et 12 pour correspondre à votre interface réelle.
Sortie CSS propre – Les sélecteurs du conteneur et des éléments sont générés sous forme d'un extrait propre et prêt à copier.
Fonctionne entièrement dans le navigateur – Aucune mise à jour, aucun tour de réseau ; votre configuration ne quitte jamais la page.

 FAQ

Quelle est la différence entre justify-content et align-items ?

justify-content positionne les éléments le long de l'axe principal (la direction définie par flex-direction), tandis que align-items les positionne le long de l'axe transversal. Échanger flex-direction entre row et column inverse le contrôle horizontal ou vertical de l'alignement.
Quand align-content s'applique-t-il réellement ?

align-content n'a effet que lorsque flex-wrap permet aux éléments de passer sur plusieurs lignes. Sur un conteneur à une seule ligne (flex-wrap: nowrap), le navigateur ignore align-content car il n'y a qu'une seule ligne à aligner.
Qu'est-ce que flex-grow, flex-shrink et flex-basis contrôlent ?

flex-basis est la taille initiale de l'élément le long de l'axe principal. flex-grow répartit l'espace libre proportionnellement aux éléments dont la valeur de grow est supérieure à 0. flex-shrink permet aux éléments de se réduire en dessous de leur base lorsque l'espace est épuisé ; 0 signifie que l'élément conserve sa taille de base.
L'ordre peut-il remplacer les modifications de la structure HTML ?

La propriété order modifie uniquement la position visuelle — l'ordre source dans le DOM reste le même. Cela conserve la flexibilité pour le layout, mais peut nuire aux utilisateurs d'écrans lecteurs si l'ordre visuel et logique s'éloignent trop, donc utilisez-la avec parcimonie pour les contenus sensibles à l'accessibilité.
Dois-je encore utiliser Flexbox lorsque CSS Grid existe ?

Flexbox est optimisé pour des layouts unidimensionnels — une ligne ou une colonne où les éléments s'ajustent selon leur contenu et l'espace disponible. Grid excelle dans les layouts bidimensionnels avec des pistes explicites. La plupart des interfaces réelles utilisent les deux : Grid pour le squelette de la page, Flexbox pour les composants à l'intérieur de chaque cellule.

Envie d'une expérience sans pub ? Passez à la version sans pub



 Installez nos extensions

Ajoutez des outils IO à votre navigateur préféré pour un accès instantané et une recherche plus rapide

Sur

恵 Le Tableau de Bord Est Arrivé !

Tableau de Bord est une façon amusante de suivre vos jeux, toutes les données sont stockées dans votre navigateur. D'autres fonctionnalités arrivent bientôt !

ANNONCE · Supprimer ?