Générateur Flexbox CSS

Créez des layouts CSS Flexbox visuellement. Ajustez direction, justify-content, align-items, wrap et gap. Copiez le code CSS. Gratuit, 100% dans votre navigateur.

Direction (flex-direction)

Axe principal (justify-content)

Axe transversal (align-items)

Retour à la ligne (flex-wrap)

Espacement (gap): 10px

Éléments

Aperçu

Sortie CSS

Référence

Qu'est-ce que CSS Flexbox ?

CSS Flexbox est un modèle de mise en page unidimensionnel qui organise les éléments en ligne ou en colonne. Il simplifie l'alignement, la distribution et le redimensionnement des éléments — sans floats ni positionnement.

Propriétés clés

flex-direction — définit l'axe principal (row, column). justify-content — distribue les éléments le long de l'axe principal. align-items — aligne les éléments sur l'axe transversal. flex-wrap — permet le retour à la ligne sur plusieurs rangées. gap — définit l'espacement entre les éléments.

Confidentialité

Tout le traitement s'exécute 100% dans votre navigateur. Aucune donnée n'est envoyée à un serveur.

← Retour à tous les outils