Alle Tools

CSS Flexbox Generator

Flex-Container interaktiv konfigurieren — Richtung, Umbruch, Ausrichtung — und die Eigenschaften jedes Elements (grow, shrink, basis, align-self) anpassen. Live-Vorschau und CSS-Code sofort kopieren.

3 items
1
2
3

Click an item to edit its properties below

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

.flex-item-1 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-2 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-3 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}
Buy me a coffee

Container-Eigenschaften

flex-direction: Legt die Hauptachse fest — row, row-reverse, column, column-reverse.
flex-wrap: Ob Elemente in mehrere Zeilen umbrechen — nowrap, wrap, wrap-reverse.
justify-content: Ausrichtung entlang der Hauptachse.
align-items: Ausrichtung entlang der Querachse für eine einzelne Zeile.
align-content: Ausrichtung mehrerer Zeilen (nur aktiv bei aktivem flex-wrap).

Element-Eigenschaften

flex-grow: Wie stark das Element wächst, wenn Platz vorhanden ist.
flex-shrink: Wie stark das Element schrumpft, wenn der Platz knapp wird.
flex-basis: Anfangsgröße des Elements vor Wachstum oder Schrumpfung.
align-self: Überschreibt align-items des Containers für dieses Element.

Verwandte Werkzeuge

CSS-Box-Shadow-Generator

CSS-Box-Schatten visuell mit Schiebereglern erstellen. Mehrere Schatten-Ebenen, Blur, Spread, Farbe und Deckkraft.

CSS-Farbverlauf-Generator

Schöne CSS-Linear- und Radialfarbverläufe visuell erstellen. Farben, Stops und Winkel anpassen — fertiges CSS kopieren.

CSS-Farbverlauf-Textgenerator

Farbverlauf-Texteffekte online erstellen. 2–4 Farben wählen, Richtung festlegen und fertigen CSS-background-clip-Code kopieren.

CSS-Variablen-Generator

Vollständigen CSS-Custom-Properties-:root-Block für Farben, Abstände, Typografie und Border-Radius erstellen und kopieren.

CSS-Grid-Generator

CSS-Grid-Layouts visuell erstellen. Spalten, Zeilen, Abstände konfigurieren, Spans per Drag erstellen und CSS kopieren.

CSS-Border-Radius-Generator

Border-Radius-CSS mit unabhängigen Eckenreglern und Live-Vorschau visuell generieren.

CSS-Textschatten-Generator

Überlagerte CSS-Textschatten-Effekte mit Live-Vorschau und Einmal-Kopieren erstellen.

CSS-Filter-Generator

CSS-Filtereffekte generieren — Blur, Helligkeit, Kontrast, Farbton, Sättigung, Sepia und mehr — mit Live-Bildvorschau.

CSS-Clip-Path-Generator

CSS-clip-path-Formen interaktiv generieren — Polygone, Kreise und Ellipsen — mit Live-Vorschau. Kontrollpunkte verschieben.

CSS-Animations-Generator

CSS-@keyframe-Animationen visuell mit Timing-, Easing-, Verzögerungs- und Iterations-Reglern erstellen.