Flexbox Playground

Meistern Sie Flexbox mit interaktiven visuellen Kontrollen

Container-Eigenschaften

Flex-Richtung

Flex-Umbruch

Inhalt rechtfertigen

Elemente ausrichten

Inhalt ausrichten

Abstand

Spaltenabstand

Zeilenabstand

Container-Breite

Mindesthöhe

Polsterung

Presets

Elemente

Vorschau

Item 1

Item 2

Item 3

Hauptachse

Horizontal

Querachse

Vertikal

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