# Bac à sable CSS flexbox

> Explore l'alignement, le retour à la ligne et les espacements de façon visuelle.

[Open tool](https://www.toolcabana.com/fr/css-flexbox-playground) · [Design et CSS](https://www.toolcabana.com/fr/category/design-and-css)

Tool ID: css-flexbox-playground. Requested language: fr. Description language: fr. Complete guide translation: yes.

## Overview (en)

CSS flexbox playground previews a flex container with 1 to 30 numbered items and writes the matching CSS. Set flex-direction (row, column or their reverses), justify-content including space-between and space-evenly, align-items, wrap or nowrap, and a gap from 0 to 100 px, then copy the six declarations once the preview looks right.

## Supported tasks (fr)

Explore l'alignement, le retour à la ligne et les espacements de façon visuelle.

## Steps (fr)

1. Saisissez les valeurs demandées dans le panneau des paramètres.
2. Ajustez les paramètres de base, puis ouvrez le mode avancé pour les options d'export et de réglage fin. Vos paramètres personnalisés restent actifs une fois le panneau fermé.
3. Lancez le bac à sable CSS flexbox, vérifiez le résultat, puis utilisez les commandes de copie ou de téléchargement disponibles.

## Settings

- Direction (fr; key: direction; type: select): row [fr], column [fr], row-reverse [fr], column-reverse [fr]
- Justification du contenu (fr; key: justify; type: select): flex-start [fr], center [fr], flex-end [fr], space-between [fr], space-around [fr], space-evenly [fr]
- Alignement des éléments (fr; key: align; type: select): stretch [fr], flex-start [fr], center [fr], flex-end [fr]
- Retour à la ligne (fr; key: wrap; type: select): wrap [fr], nowrap [fr]
- Espacement (px) (fr; key: gap; type: number); minimum: 0; maximum: 100
- Éléments (fr; key: items; type: number); minimum: 1; maximum: 30

## Limitations (fr)

Les images respectent la limite existante de 32 mégapixels du canevas. Jusqu'à 100 images sources sont autorisées lorsque c'est pris en charge. Le HTML collé est limité à 200 000 caractères ; les diagrammes Mermaid à 20 000 caractères et 300 lignes. La génération SVG et PNG nécessite un navigateur.

## Privacy and connections (fr)

Cette opération traite sa source dans votre navigateur. La copie et le téléchargement sont des actions explicites ; la saisie source n'est enregistrée ni dans un compte ni dans l'historique.

## Questions (fr)

### What is the difference between space-between, space-around and space-evenly?

space-between puts the first and last items at the edges with equal gaps between items. space-around gives each item equal space on both sides, so edge gaps are half the inner ones. space-evenly makes every gap, including the edges, the same. Try each in the preview.

### Why does align-items seem to do nothing in the flexbox preview?

align-items works on the cross axis. With direction row, it moves items vertically inside the 220 px tall preview, and stretch makes them fill that height. With column, it acts horizontally, so switch direction to see the change.

### Does the flexbox playground set flex properties on the items?

No. The output covers only the container: display, flex-direction, justify-content, align-items, flex-wrap and gap. Item properties like flex-grow or order are not generated, so add them separately if individual items need to size differently.

### Où ma saisie est-elle traitée ?

Cette opération traite sa source dans votre navigateur. La copie et le téléchargement sont des actions explicites ; la saisie source n'est enregistrée ni dans un compte ni dans l'historique.

### Quelles sont les limites de saisie ?

Les images respectent la limite existante de 32 mégapixels du canevas. Jusqu'à 100 images sources sont autorisées lorsque c'est pris en charge. Le HTML collé est limité à 200 000 caractères ; les diagrammes Mermaid à 20 000 caractères et 300 lignes. La génération SVG et PNG nécessite un navigateur.

## Related tools

- [CSS clamp calculator](https://www.toolcabana.com/fr/css-clamp-calculator)
- [CSS grid layout generator](https://www.toolcabana.com/fr/css-grid-layout-generator)
- [CSS cubic Bezier editor](https://www.toolcabana.com/fr/css-cubic-bezier-editor)
- [CSS clip-path maker](https://www.toolcabana.com/fr/css-clip-path-maker)