Générateur de Flexbox

Ajustez visuellement la mise en page Flexbox et générez du code CSS.

•Sélectionnez la direction du conteneur (ligne, colonne, ligne inversée, colonne inversée)
•Sélectionnez la propriété d'ajustement (nowrap, wrap, wrap-reverse)
•Ajustez la propriété justify-content (flex-start, center, space-between, etc.)
•Ajustez la propriété align-items (stretch, center, flex-start, etc.)
•Le code CSS sera généré automatiquement dans la zone d'aperçu
•Cliquez sur "Copier" pour copier le code CSS dans le presse-papiers

Direction (flex-direction)

Justifier le Contenu

Aligner les Éléments

Flex Wrap

Espace: 10px

Nombre d'Éléments: 3

Preview

Code CSS

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

Commentaires

Votre Nom

CAPTCHA *