Générateur de Flexbox CSS
Créez visuellement des dispositions CSS avec Flexbox. Voyez le résultat en temps réel pendant que vous ajustez la direction, l'alignement, le retour à la ligne et l'espacement.
display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; flex-wrap: nowrap; gap: 8px;
Comment utiliser cet outil
- 1
Pick values from the four dropdowns: flex-direction, justify-content, align-items, and flex-wrap.
- 2
Drag the gap slider to set the spacing between items, from 0 to 40 pixels.
- 3
Watch the live preview of four numbered boxes update instantly to reflect each change.
- 4
Click 'Copy CSS' to copy the generated declaration block, then paste it onto your own flex container.
Qu'est-ce que le générateur de Flexbox CSS ?
Flexbox est la manière moderne de disposer les éléments en CSS, bien plus simple que les floats ou le positionnement absolu. Les propriétés sont : flex-direction (ligne ou colonne), justify-content (alignement sur l'axe principal), align-items (axe transversal), flex-wrap et gap. Cet outil les expose toutes avec un aperçu en temps réel.
Cas d'usage courants
Aligning a horizontal navigation bar so links sit at flex-start and a logo or button pushes to flex-end with space-between.
Centering a single element both horizontally and vertically using justify-content: center and align-items: center.
Spacing a row of buttons or tags evenly with a fixed gap instead of fragile margins.
Stacking form fields vertically by switching flex-direction to column while keeping consistent gap spacing.
Letting a row of cards wrap onto new lines on narrow screens with flex-wrap: wrap.
Learning how justify-content and align-items behave by toggling values and watching the live preview before committing the code.
Questions fréquentes
Flexbox ou Grid ?▼
Outils connexes
Convertisseur de couleur (HEX/RGB/HSL)
Convertissez des couleurs entre les formats HEX, RGB et HSL. Choisissez une couleur visuellement ou saisissez les valeurs manuellement.
Générateur de box-shadow CSS
Créez visuellement des valeurs de box-shadow en CSS. Prévisualisez en temps réel et copiez le CSS généré.
Générateur de dégradés CSS
Créez des dégradés CSS linéaires et radiaux. Choisissez les couleurs visuellement et copiez le CSS généré.
Générateur de courbes d'accélération cubic-bezier
Créez des courbes d'accélération cubic-bezier pour CSS. Inclut des préréglages standard.
Générateur de palettes de couleurs
Générez des palettes de couleurs harmonieuses à partir de n'importe quelle couleur de base. Prend en charge les schémas complémentaires, analogues, triadiques et monochromatiques.
Générateur de border-radius CSS
Créez visuellement des valeurs complexes de border-radius en CSS. Contrôle indépendant de chaque coin.