Flexbox-Spielwiese

Erstellen Sie ein Flex-Layout und kopieren Sie das exakte CSS.

Vorschau von Richtung, Umbruch, Abständen und Ausrichtung an einem Ort. Jedes Steuerelement aktualisiert das Live-Beispiel, erklärt die Eigenschaft und gibt sauberen Code aus.

Container-Steuerung Ändern Sie flex-direction, justify-content, align-items, align-content und gap.
Element-Steuerung Passen Sie flex-grow, flex-shrink, flex-basis und align-self für jedes Element an.

Flexbox-Generator

Nutzen Sie Voreinstellungen für gängige Muster oder passen Sie jede Eigenschaft direkt an. Die Eingaben sind auf sichere Bereiche begrenzt.

Fluss der Elemente entlang der Hauptachse.
Ermöglicht mehrere Zeilen bei Platzmangel.
Verteilt Elemente entlang der Hauptachse.
Richtet Elemente quer zur Hauptachse aus.
Beeinflusst nur mehrzeilige Layouts (Wrap).
Nützlich beim Testen der vertikalen Ausrichtung.
0px 16px
1 4 Elemente

Ausgewähltes Element

Klicken Sie auf ein Element in der Vorschau, um es einzeln zu bearbeiten.

0 1
0 1
In Pixeln. 0 für größenabhängiges Wachstum.
Überschreibt die Container-Ausrichtung für dieses Element.

Live-Vorschau

Der Container unten wird sofort aktualisiert. Die Beschriftungen zeigen, welche Achse die Hauptrichtung ist.

Hauptachse: horizontal. Querachse: vertikal.
display: flex; gap: 16px; Einzeiliges Layout.

Kopierfertige Ausgabe

Das CSS enthält nur die im Tool dargestellten Eigenschaften. HTML-Labels verwenden semantische Klassennamen.


          


          

            
            

          

        

      


      

        

          

            
Wie es funktioniert

            
Flexbox ordnet die direkten Kindelemente eines Flex-Containers entlang einer Hauptachse und einer Querachse an.

          

        


        

          

            
1. Richtung bestimmt die Hauptachse

            
row macht die Hauptachse horizontal. column macht sie vertikal. Danach scheinen justify-content und align-items die Rollen zu tauschen.

          

          

            
2. Umbruch steuert Zeilen

            
Wenn flex-wrap auf nowrap steht, hat align-content keine sichtbare Wirkung. Es zählt nur bei mehreren Zeilen.

          

          

            
3. Elementwerte steuern den Platz

            
flex-grow steuert die Verteilung von Restplatz, flex-shrink die Kompression und flex-basis ist die Startgröße.

          

        

        
Hinweis: Die Vorschau spiegelt modernes Browserverhalten wider. Abstände und Basiswerte werden in Pixeln gerundet.

      


      

        

          

            
Kurzreferenz der Eigenschaften

            
Nutzen Sie dies als schnelles Nachschlagewerk nach dem Testen im Generator.

          

        


        

          

            
justify-content

            
Verschiebt Elemente entlang der Hauptachse. Ideal für Navigationsleisten und Schaltflächengruppen.

          

          

            
align-items

            
Steuert die Ausrichtung auf der Querachse für alle Elemente gleichzeitig. Hilfreich bei unebenen Kartenhöhen.

          

          

            
align-self

            
Überschreibt die Querachsen-Ausrichtung für ein einzelnes Element, ohne den Rest zu ändern.