Développeur / Mise en page CSS

Aire de jeu Flexbox : contrôles CSS du conteneur et des éléments

Testez la direction flex, le retour à la ligne, la justification, l’alignement et les espacements, puis ajustez la croissance, la réduction, la base, l’ordre et l’alignement de chaque élément. Observez les changements de mise en page et copiez le CSS.

Aire de jeu Flexbox : contrôles CSS du conteneur et des éléments: Affiche un conteneur flex interactif avec des propriétés d’éléments modifiables et une courte explication à côté de chaque contrôle. L’aperçu possède une hauteur fixe pour rendre visibles les effets sur l’axe transversal. Les mises en page Grid avec des lignes et des colonnes partagées sont disponibles dans le générateur CSS Grid. Fonctionne 100 % localement dans votre navigateur, sans aucun téléversement de fichier vers le serveur.

Catégorie: Outils développeur
Exécutions: Dans votre navigateur
Coût: Gratuit · sans inscription
Disponibilité: Prêt à l'emploi

Banc de mise en page FlexboxTraitement local

Fonctionne entièrement dans votre navigateur

DirectionDéfinit l’axe principal et sa direction.Retour à la ligneAutorise des lignes supplémentaires lorsque les éléments ne tiennent pas.Justification du contenuRépartit l’espace disponible le long de l’axe principal.Alignement des élémentsAligne les éléments sur l’axe transversal de chaque ligne.Alignement du contenuRépartit les lignes sur l’axe transversal lorsque le retour à la ligne en crée plusieurs.Espacement (px)Définit l’espace entre les éléments et les lignes voisines.

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 12px;
}
.item-1 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-2 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-3 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-4 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-5 { flex: 0 1 120px; order: 0; align-self: auto; }

Utilisez flexbox pour une ligne ou une colonne. Utilisez CSS Grid lorsque les lignes et les colonnes doivent partager des pistes. Ouvrir le générateur CSS Grid

Élément sélectionné 1AgrandirPart relative de l’espace libre positif.RéduireFacteur relatif de réduction, multiplié par la taille de base.BaseTaille initiale sur l’axe principal avant agrandissement ou réduction.OrdreOrdre visuel uniquement ; l’ordre de lecture et l’ordre au clavier restent inchangés.Alignement individuelRemplace l’alignement de cet élément sur l’axe transversal du conteneur.

Modèle de mise en page flex

Module 1 du W3C sur la mise en page avec des boîtes flexibles CSS : https://www.w3.org/TR/css-flexbox-1/ . L'espace disponible est réparti selon les facteurs de croissance et de réduction flex le long de l'axe principal.

Alignement et accessibilité

Concepts de base de flexbox sur MDN : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox . L'axe transversal est perpendiculaire à l'axe principal ; le réordonnancement visuel ne modifie pas l'ordre du document.

Comment l'utiliser

Définissez la direction, le retour à la ligne et l’alignement du conteneur.
Cliquez sur un élément et modifiez sa taille et son alignement individuels.
Ajoutez ou supprimez des éléments, examinez la mise en page et copiez le CSS généré.

Confidentialité et limitations

Les paramètres de mise en page sont traités localement dans votre navigateur.

Outils associés

Questions fréquentes

Pourquoi align-content ne produit-il parfois aucun effet ?

Cette propriété répartit les lignes flex. Pour avoir un effet visible, le retour à la ligne doit être activé, plusieurs lignes doivent être présentes et il doit rester de l’espace sur l’axe transversal.

order modifie-t-il l’ordre de lecture par les lecteurs d’écran ?

Non. Il modifie l’ordre visuel, tandis que l’ordre de lecture du document et l’ordre de navigation au clavier restent inchangés. Conservez un ordre logique dans le document.

Quand dois-je plutôt utiliser Grid ?

Utilisez Grid lorsque les lignes et les colonnes doivent partager des pistes. Flexbox est utile pour organiser principalement les éléments selon un seul axe.

Outil gratuit · dans votre navigateur exécutions · aucun compte requis