Générateur de boîtes flexibles

Expérimentez avec la direction de flexion, enveloppez, justifiez et alignez. Regardez la mise à jour des dispositions des éléments en direct, puis copiez le CSS du conteneur.

Flexbox Generator

Live

flex-directionflex-wrapjustify-contentalign-items

Gap12px

Items5

CSS output

display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
gap: 12px;

Key capabilities

Expérimentez avec la direction flexible, l'enroulement, la justification et l'alignement – voir la mise à jour des mises en page en direct.
S'exécute dans votre navigateur
Utilisation gratuite

Mode d'emploi

Définissez la direction de flexion et enveloppez.
Ajustez justifier le contenu et aligner les éléments.
Copiez le CSS Flexbox.

How this tool works

Définissez la direction de flexion et enveloppez.
Ajustez justifier le contenu et aligner les éléments.
Copiez le CSS Flexbox.

Recommended settings

Utilisez d'abord les options par défaut, puis ajustez si nécessaire

Supported formats

Text / on-page input

File size and limits

Les aperçus multicouches très complexes peuvent sembler plus lents sur les téléphones plus anciens.

Privacy

Les générateurs de couleurs et CSS fonctionnent entièrement dans votre navigateur. Les aperçus et les conversions ne téléchargent jamais vos styles.

Common use cases

Utilisez Flexbox Generator quand vous en avez besoin : expérimentez la direction flexible, l'enroulement, la justification et l'alignement – voir la mise à jour des mises en page en direct.

Troubleshooting

L'aperçu est différent après le collage

Vérifiez les CSS concurrents sur votre page (réinitialisations, couleurs héritées). Copiez d'abord la règle générée dans une feuille de style isolée.

FAQ

Est-ce que cela télécharge mon CSS ?

Non. Les générateurs et les convertisseurs s'exécutent dans votre navigateur avec un aperçu en direct.

Ai-je besoin d'un compte ?

Non. Ouvrez l'outil, modifiez les contrôles et copiez le CSS.