Bac à sable Flexbox
Flexbox Playground
Actionne chaque propriété flex sur un exemple vivant et montre le CSS ainsi que ce que chaque propriété a changé.
Toutes les propriétés de flexbox sur un exemple vivant, avec une ligne sous chaque contrôle disant ce qu’elle fait réellement. L’aperçu est la disposition flex du navigateur lui-même et le CSS est cet état mis par écrit : ce que vous voyez est ce que fera votre page.
Aperçu
Cliquez sur un élément pour modifier ses propres propriétés à droite.
Conteneur
Élément 1
Code
- · L’axe principal est horizontal.
- · Tous les flex-grow valent 0 : c’est donc justify-content qui répartit l’espace libre.
Les propriétés laissées à leur valeur par défaut ne sont pas écrites. Seul ce que vous avez changé apparaît.
Comment s’en servir
Réglez les propriétés du conteneur
Direction, retour à la ligne, et les trois propriétés d’alignement. Chacune a une phrase en dessous expliquant ce qu’elle change — `align-content` en particulier ne fait strictement rien avec une seule ligne.
Cliquez un élément pour le modifier
Grow, shrink, basis, align-self et order s’appliquent à un seul élément. Ajoutez et retirez des éléments pour voir comment le conteneur redistribue.
Lisez les notes et copiez le CSS
Le panneau décrit ce que votre disposition actuelle fera réellement, et la sortie omet toute propriété restée à sa valeur par défaut : ce que vous copiez n’est donc que ce que vous avez changé.
Questions fréquentes
Pourquoi mon élément déborde-t-il au lieu de rétrécir ?
Soit `flex-shrink: 0`, soit un enfant avec une taille de contenu minimale. Le `min-width` d’un élément flex vaut `auto` par défaut, ce qui veut dire qu’il ne rétrécira pas en dessous de son contenu — une longue chaîne insécable ou une image large est le coupable habituel. `min-width: 0` est le correctif.
Quelle est la différence entre `align-items` et `align-content` ?
`align-items` place chaque élément sur l’axe transversal. `align-content` place le *bloc de lignes* quand le retour à la ligne en a produit plusieurs — donc avec `nowrap`, ou avec une seule ligne, elle ne fait strictement rien. C’est la source la plus fréquente du « cette propriété est cassée ».
Dois-je me servir de `order` pour réorganiser les choses ?
Avec parcimonie. Cela change l’ordre visuel et pas l’ordre du DOM, donc les lecteurs d’écran et l’ordre de tabulation suivent toujours le balisage. Une personne au clavier qui tabule dans une disposition réordonnée visuellement saute d’un bout à l’autre de l’écran — et c’est pourquoi la spécification en fait un dernier recours.
Flexbox ou grid ?
Flexbox pour une dimension : une rangée de boutons, une barre d’outils, l’intérieur d’une carte. Grid quand les lignes et les colonnes doivent s’aligner entre elles. Si vous imbriquez des conteneurs flex pour imiter une grille, c’est une grille que vous voulez.
À alimenter depuis
Ensuite
Ces outils acceptent ce que celui-ci produit : le résultat peut y aller directement.
Calculateur de taille fluide
Fluid Size Calculator
Calcule une expression clamp() qui fait varier une taille en douceur entre deux largeurs de fenêtre.
Formater ou minifier du CSS
CSS Beautifier & Minifier
Met en forme ou minifie du CSS sans rien réordonner, en conservant le flux de jetons à l’identique.
Constructeur de grille CSS
CSS Grid Builder
Dispose une grille visuellement avec des zones nommées et rend le CSS grid-template correspondant.
Convertisseur de formats de couleur
Colour Format Converter
Convertit une couleur entre HEX, RGB, HSL, HWB, LAB, LCH et OKLCH et nomme la couleur connue la plus proche.
Sélecteur de couleur
Colour Picker
Choisit une couleur sur un champ OKLCH, à la pipette sur l’écran ou depuis une image, et la copie dans la notation de votre choix.
Vérificateur de contraste
Contrast Checker
Note un couple texte et fond selon WCAG 2 et APCA et propose la couleur conforme la plus proche.