CSS Flexbox-Generator
Flexbox-Layouts visuell gestalten und das CSS kopieren
Klicken Sie auf ein Element in der Vorschau, um individuelle Überschreibungen festzulegen.
Anleitung
- Container konfigurieren — Stellen Sie display, Richtung, Umbruch und Ausrichtung über die Dropdowns ein; die Vorschau aktualisiert sich sofort.
- Abstand anpassen — Ziehen Sie den gap-Regler, um die Elemente gleichmäßig zu verteilen, ohne margin-Regeln zu schreiben.
- Elementanzahl ändern — Wählen Sie zwischen 3 und 12 Demo-Elementen, um zu sehen, wie sich Ihr Layout bei zunehmender Füllung verhält.
- Einzelnes Element überschreiben — Klicken Sie auf ein Element in der Vorschau und setzen Sie flex-grow, flex-shrink oder align-self individuell, um es aus den Container-Regeln zu lösen.
- CSS kopieren — Übernehmen Sie die generierten
.container- und.item-N-Blöcke in Ihr Stylesheet. Standardwerte werden weggelassen, damit die Ausgabe sauber bleibt.
Funktionen
- Volle Container-Kontrolle — display, flex-direction, flex-wrap, justify-content, align-items, align-content und gap an einem Ort.
- Live-Vorschau — Jede Änderung wird sofort in einem Demo-Container mit nummerierten, farbcodierten Elementen dargestellt.
- Überschreibungen pro Element — Wählen Sie ein beliebiges Element aus, um ihm ein eigenes flex-grow, flex-shrink oder align-self zu geben — ausgegeben als separate
.item-N-Regel. - Saubere Ausgabe — Eigenschaften mit CSS-Standardwerten werden weggelassen, sodass Sie nur kopieren, was das Layout tatsächlich verändert.
- 100 % clientseitig — Alles läuft in Ihrem Browser; keine Daten verlassen Ihr Gerät.
Anwendungsfälle
- Navigationsleisten und Toolbars: Prototypieren Sie einen
space-between-Header mit zentrierter Gruppe und prüfen Sie das Umbruchverhalten, bevor Sie Ihren Code anfassen. - Holy-Grail-Layouts: Kombinieren Sie
flex-growauf einer Hauptspalte mit festen Seitenspalten, um klassische mehrspaltige Seitenstrukturen zu skizzieren. - Flexbox lernen: Ändern Sie jeweils eine Eigenschaft und beobachten Sie die Vorschau, um ein Gefühl für das Zusammenspiel von Haupt- und Querachse zu entwickeln.
Verwandte Tools
- CSS Box-Shadow-Generator — Mehrschichtige Boxschatten mit Live-Vorschau gestalten.
- CSS Gradient-Generator — Eigene CSS-Verläufe für Ihre Layouts erstellen.
- Farbpaletten-Generator — Harmonische Farbpaletten für Ihr Design generieren.
Häufig gestellte Fragen
Was ist der Unterschied zwischen justify-content und align-items?
justify-content verteilt die Elemente entlang der Hauptachse — horizontal in einem Zeilenlayout, vertikal in einem Spaltenlayout. align-items positioniert die Elemente auf der Querachse, die senkrecht zur Hauptachse verläuft. Wenn Sie das Layout mit flex-direction: column drehen, tauschen die beiden Achsen praktisch ihre Rollen.
Wann wirkt sich align-content aus?
align-content spielt nur eine Rolle, wenn der Container die Elemente auf mehrere Zeilen umbricht (flex-wrap: wrap oder wrap-reverse) und auf der Querachse zusätzlicher Platz vorhanden ist. Bei einer einzelnen Zeile hat es keine Wirkung — verwenden Sie dafür align-items.
Was steuern flex-grow und flex-shrink genau?
flex-grow bestimmt, wie viel des übrigen Platzes ein Element im Verhältnis zu seinen Nachbarn aufnimmt: Ein Element mit flex-grow: 2 wächst doppelt so stark wie eines mit flex-grow: 1. flex-shrink wirkt umgekehrt, wenn der Platz knapp wird — höhere Werte schrumpfen stärker. Mit flex-shrink: 0 behält ein Element seine natürliche Größe.