Ajustez et prévisualisez visuellement les dispositions CSS Flexbox et Grid avec animations et copie de code en temps réel.
.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
gap: 12px;
}<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>Ajustez et prévisualisez visuellement les dispositions CSS Flexbox et Grid avec animations et copie de code en temps réel. Utilisez-le au travail, en développement, en apprentissage ou pour une vérification rapide.
Cet outil fonctionne dans le navigateur. Avant d'utiliser des données sensibles, assurez-vous que votre appareil et votre navigateur sont fiables.
Cet outil permet de construire des mises en page Flexbox ou CSS Grid à partir de menus, sans retenir la syntaxe. En haut, basculez entre Boîte Flexbox et Grille CSS Grid, choisissez de 1 à 12 éléments avec les boutons plus et moins, puis sélectionnez les propriétés. L'aperçu applique chaque changement immédiatement, et le CSS du conteneur ainsi que la structure HTML correspondante s'affichent dessous, chacun avec son bouton de copie. La sortie par défaut est .container { display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; flex-wrap: nowrap; gap: 12px; }
Le mode Flexbox couvre flex-direction (row, row-reverse, column, column-reverse), justify-content pour l'axe principal (dont space-between, space-around et space-evenly), align-items pour l'axe secondaire (dont stretch et baseline) et flex-wrap. N'oubliez pas que l'axe principal suit la direction : avec flex-direction: column, justify-content contrôle la position verticale et align-items la position horizontale. Quand les éléments dépassent la largeur, nowrap les tasse sur une seule ligne ; seul wrap les fait passer à la ligne suivante.
Le mode Grid propose des modèles de colonnes courants : colonnes égales de repeat(2, 1fr) à repeat(4, 1fr), une colonne centrale plus large avec 1fr 2fr 1fr, et la version adaptative repeat(auto-fit, minmax(100px, 1fr)), qui place autant de colonnes que la largeur du conteneur le permet. Les lignes peuvent valoir auto, repeat(2, 80px) ou 1fr 1fr, et justify-items et align-items positionnent chaque élément horizontalement et verticalement dans sa cellule. Les deux modes partagent le curseur d'espacement gap (0 à 40 px), qui espace lignes et colonnes d'un coup, plus proprement que des marges sur chaque élément.
Le code généré ne contient que les règles de mise en page de .container et la structure HTML de .item ; couleurs, tailles et marges internes des éléments restent à définir selon votre design. Règle simple : Flexbox pour les dispositions à une dimension, comme une rangée de boutons, une barre de navigation ou le centrage d'un élément, et Grid pour les mises en page à deux dimensions où lignes et colonnes doivent s'aligner, comme des grilles de cartes ou des tableaux de bord. Tout se met à jour instantanément dans le navigateur : expérimentez librement pour voir l'effet de chaque propriété.
Flexbox convient aux dispositions à une dimension, le long d'une ligne ou d'une colonne : menus, groupes de boutons ou centrage. Grid convient aux mises en page à deux dimensions où lignes et colonnes doivent s'aligner, comme des listes de cartes ou la structure d'une page. Les deux se combinent bien : Grid pour le squelette, Flexbox dans chaque composant.
align-items agit sur l'axe secondaire : si le conteneur n'a pas d'espace libre dans cette direction, les éléments ne peuvent pas bouger. La valeur par défaut stretch les étire en plus. Passez à flex-start ou center et donnez au conteneur une hauteur supérieure à celle des éléments pour voir la différence.
Le navigateur crée des colonnes d'au moins 100 px et d'au plus une part égale de l'espace restant, en en plaçant autant que le conteneur peut en contenir. Quand il rétrécit, le nombre de colonnes diminue automatiquement : une grille adaptative sans media query.
Non. La sortie comprend les propriétés de mise en page de .container (display, direction, alignement, retour à la ligne ou modèles de grille, et gap) ainsi que la structure HTML de .item. Les cartes colorées de l'aperçu ne sont qu'illustratives ; ajoutez vous-même largeur, hauteur, couleurs et marges internes aux vrais éléments.
Voir cette catégorie: Design & Couleurs
Générez des combinaisons de couleurs harmonieuses et exportez les valeurs HEX/RGB.
Nettoyez et compressez le code SVG localement avec comparaison de taille.
Créez des dégradés linéaires et radiaux avec aperçu direct et copie CSS.
Convertissez en temps réel entre HEX, RGB, HSL et CMYK.
