Flexbox-Generator

Name: Flexbox-Generator
Rating: 4.8 (100 reviews)

Passen Sie das Flexbox-Layout visuell an und generieren Sie CSS-Code.

•Wählen Sie die Container-Richtung (Reihe, Spalte, umgekehrte Reihe, umgekehrte Spalte)
•Wählen Sie die Umbrucheigenschaft (nowrap, wrap, wrap-reverse)
•Passen Sie die justify-content-Eigenschaft an (flex-start, center, space-between, etc.)
•Passen Sie die align-items-Eigenschaft an (stretch, center, flex-start, etc.)
•Der CSS-Code wird automatisch im Vorschaubereich generiert
•Klicken Sie auf "Kopieren", um den CSS-Code in die Zwischenablage zu kopieren

Richtung (flex-direction)

Inhalt Ausrichten

Elemente Ausrichten

Flex Wrap

Abstand: 10px

Elementanzahl: 3

Preview

CSS-Code

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