Générateur CSS Flexbox

Construisez des mises en page CSS Flexbox visuellement. Configurez les propriétés du conteneur et des éléments avec un aperçu en direct et copiez le CSS généré.

Presets

flex-direction

justify-content

align-items

flex-wrap

gap12px

Child Items4

Live Preview

Click any item to edit its properties

Generated CSS

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 12px;
}

Comment utiliser Générateur CSS Flexbox

1Définissez les propriétés du conteneur : direction, justification, alignement, enveloppe et écart.
2Ajoutez ou supprimez des éléments enfants dans l'aperçu en direct.
3Configurez les propriétés par élément : flex-grow, flex-shrink, flex-basis et order.
4Copiez le CSS généré pour votre projet.

ZenovayAnalytics

Sachez ce que vos visiteurs font vraiment.

Suivi des visiteurs en temps réel
Vie privée d'abord, sans bandeau cookies
Installé en deux minutes

Découvrir Zenovay

Outils connexes

Générateur de gradient CSS

Créez de beaux gradients CSS avec un éditeur visuel. Gradients linéaires, radiaux et coniques.

Générateur d'Ombre de Boîte CSS

Concevez des ombres de boîte CSS avec des contrôles visuels. Ajustez le décalage, le flou, l'étalement et la couleur.

Générateur de Rayon de Bordure CSS

Créez des valeurs de rayon de bordure personnalisées avec des contrôles visuels. Liez ou dissociez les coins pour un ajustement rapide.

Zone de jeu CSS Flexbox

Apprenez et générez des mises en page CSS Flexbox visuellement. Ajustez la direction, l'alignement, l'enveloppe et l'écart en temps réel.

Questions fréquemment posées

Qu'est-ce que CSS Flexbox ?▾

CSS Flexbox est un modèle de mise en page qui distribue l'espace entre les éléments d'un conteneur, même lorsque leurs tailles sont inconnues. Il fonctionne le long d'un seul axe à la fois (ligne ou colonne).

Que fait flex-direction ?▾

flex-direction définit l'axe principal : row (de gauche à droite), column (de haut en bas), row-reverse ou column-reverse. Il détermine comment les éléments circulent dans le conteneur.

Quelle est la différence entre justify-content et align-items ?▾

justify-content aligne les éléments le long de l'axe principal (défini par flex-direction). align-items aligne les éléments le long de l'axe transversal (perpendiculaire à l'axe principal).

Que font flex-grow, flex-shrink et flex-basis ?▾

flex-grow contrôle la croissance d'un élément par rapport à ses frères. flex-shrink contrôle sa réduction. flex-basis définit la taille initiale avant la croissance/réduction.

Quand dois-je utiliser Flexbox ou Grid ?▾

Utilisez Flexbox pour les mises en page unidimensionnelles (une ligne ou une colonne d'éléments). Utilisez Grid pour les mises en page bidimensionnelles (lignes et colonnes ensemble). Elles peuvent être combinées.