Générateur et laboratoire CSS Flexbox
Modifiez les réglages pour voir les éléments se répartir. Copiez les règles du conteneur dans votre feuille de styles.
Fonctionne localement dans votre navigateur · display: flex · alignement · écart
Modifiez les réglages pour voir les éléments se répartir. Copiez les règles du conteneur dans votre feuille de styles.
Fonctionne localement dans votre navigateurL’atelier écrit une seule règle pour le conteneur : display: flex, puis flex-direction, flex-wrap, justify-content, align-items, align-content et gap. La scène affiche des boîtes numérotées pour montrer l’interaction des réglages avant de copier la règle dans votre feuille de styles.
Il n’y a pas de bouton d’exécution : l’aperçu et le panneau de code suivent chaque changement. Copier CSS place exactement ce texte dans le presse-papiers et Réinitialiser rétablit l’état de chargement : row, wrap, flex-start, stretch, stretch, 16 px, 6 éléments.
flex-direction fixe l’axe principal et l’ordre des boîtes ; flex-wrap laisse les éléments passer à la ligne ; justify-content répartit l’espace libre sur l’axe principal, son effet est donc plus visible tant que la ligne n’est pas entièrement remplie.
align-items positionne les éléments dans leur ligne, align-content répartit les lignes entre elles. align-content ne déplace quelque chose que lorsque le conteneur occupe réellement plusieurs lignes : avec nowrap, ou sur une seule ligne, rien ne bouge même si la déclaration reste dans le CSS.
La scène dessine autant de boîtes numérotées que le nombre d’éléments demandé et applique les valeurs qui partent dans le CSS. L’indication à côté du titre nomme l’axe principal et l’axe transversal, et inverse ses flèches dès que vous passez en direction colonne.
Le nombre d’éléments ne concerne que l’aperçu : il ne fait pas partie de la règle exportée. Tant que align-items vaut stretch, les boîtes remplissent la hauteur du conteneur ; choisissez un autre alignement ou un écart fixe pour comparer les lignes.
Le code généré contient un seul bloc : .flex-container avec display: flex et les six déclarations dans l’ordre affiché. Aucune règle par élément, aucun préfixe éditeur, aucune media query : seuls le nom de classe et les valeurs sont à adapter.
L’outil s’exécute dans le navigateur : valeurs et sélections ne quittent pas la page. Copier CSS écrit ce même texte dans le presse-papiers et la ligne d’état le confirme, ce qui permet aussi de préparer la règle d’un projet avant de l’intégrer à la feuille de styles.