Developer Tools
Web UtilitiesCSS Flexbox Spielplatz
Konfigurieren Sie CSS Flexbox-Container- und Element-Eigenschaften visuell mit einer Live-Vorschau. Generieren Sie einsatzbereiten CSS-Code für flex-direction, justify-content, align-items und mehr.
Voreinstellungen
Container-Eigenschaften
Element-Eigenschaften
Live-Vorschau
1
2
3
Container-CSS
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
gap: 8px;
}Element-CSS
.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;
}Verwandte Werkzeuge
Über den CSS Flexbox Spielplatz
So funktioniert es
- Passen Sie Container-Eigenschaften wie flex-direction, flex-wrap, justify-content, align-items und align-content an
- Fügen Sie bis zu 6 Flex-Elemente hinzu und konfigurieren Sie jedes unabhängig mit flex-grow, flex-shrink, flex-basis, align-self und order
- Sehen Sie Ihr Layout in Echtzeit beim Ändern einer Eigenschaft
- Kopieren Sie den generierten Container- und Element-CSS-Code direkt in Ihr Projekt
- Verwenden Sie Voreinstellungen, um gängige Flexbox-Muster schnell zu erkunden
Häufige Anwendungsfälle
- Flexbox-Layout-Eigenschaften interaktiv erlernen
- Prototypen von Navigationsleisten, Karten-Grids und Seitenleisten erstellen
- Knifflige Flexbox-Ausrichtungsprobleme debuggen
- Basis-CSS für gängige Layout-Muster generieren
- CSS-Flexbox-Konzepte Schülern beibringen
Häufig gestellte Fragen
Was ist der CSS Flexbox Spielplatz?
Der CSS Flexbox Spielplatz ist ein interaktives Werkzeug, mit dem Sie alle Flexbox-Container- und Element-Eigenschaften visuell konfigurieren können. Änderungen erscheinen sofort in einer Live-Vorschau und einsatzbereiter CSS-Code wird automatisch generiert.
Welche Container-Eigenschaften kann ich konfigurieren?
Sie können alle sechs Haupt-Flex-Container-Eigenschaften konfigurieren: flex-direction (row, row-reverse, column, column-reverse), flex-wrap (nowrap, wrap, wrap-reverse), justify-content (flex-start, flex-end, center, space-between, space-around, space-evenly), align-items (stretch, flex-start, flex-end, center, baseline), align-content (stretch, flex-start, flex-end, center, space-between, space-around) und gap (Pixel-Wert).
Welche Eigenschaften kann ich pro Flex-Element konfigurieren?
Jedes Flex-Element kann konfiguriert werden mit: flex-grow (wie viel zusätzlichen Platz das Element einnimmt), flex-shrink (wie sehr das Element schrumpft wenn Platz knapp ist), flex-basis (die Anfangsgröße), align-self (individuelle Ausrichtungsüberschreibung) und order (visuelle Reihenfolge im Container).
Wie viele Flex-Elemente kann ich hinzufügen?
Sie können bis zu 6 Flex-Elemente hinzufügen. Klicken Sie auf den Button '+ Element hinzufügen' um mehr hinzuzufügen. Jedes Element ist farbkodiert, damit Sie es in der Vorschau und im Einstellungsbereich leicht identifizieren können.
Wie wähle ich ein bestimmtes Flex-Element aus und bearbeite es?
Klicken Sie auf eine der nummerierten Registerkarten oben im Element-Eigenschaften-Bereich, um dieses Element auszuwählen. Sie können auch direkt auf ein Element in der Live-Vorschau klicken. Das ausgewählte Element wird mit einem farbigen Rahmen hervorgehoben.
Was sind Voreinstellungen und wie verwende ich sie?
Voreinstellungen sind vorgefertigte Flexbox-Konfigurationen für gängige Layout-Muster: 'Zentrierte Zeile' zentriert Elemente horizontal und vertikal, 'Zentrierte Spalte' stapelt Elemente vertikal und zentriert sie, 'Abstand dazwischen' verteilt Elemente gleichmäßig, 'Umbruchgitter' verwendet flex-wrap, 'Gestreckte Elemente' verwendet flex-grow, 'Umgekehrte Zeile' kehrt die Anzeigereihenfolge um. Klicken Sie auf eine Voreinstellung um sie sofort anzuwenden.
Was bewirkt flex-grow?
flex-grow definiert, wie sehr ein Flex-Element relativ zu anderen Elementen wächst, wenn es zusätzlichen Platz im Container gibt. Ein Wert von 0 bedeutet, dass das Element nicht wächst. Ein Wert von 1 bedeutet gleichen Anteil am zusätzlichen Platz. Ein Wert von 2 bedeutet doppelt so viel Platz wie ein Element mit flex-grow: 1.
Was bewirkt flex-shrink?
flex-shrink definiert, wie sehr ein Flex-Element relativ zu anderen Elementen schrumpft, wenn nicht genug Platz im Container vorhanden ist. Ein Wert von 0 verhindert das Schrumpfen. Ein Wert von 1 (Standard) bedeutet proportionales Schrumpfen. Ein Wert von 2 bedeutet doppelt so schnelles Schrumpfen.
Welche Werte kann flex-basis akzeptieren?
flex-basis legt die Anfangsgröße eines Flex-Elements fest, bevor freier Platz verteilt wird. Es akzeptiert: 'auto' (verwendet Breite oder Höhe des Elements), einen Längenwert wie '100px' oder '20%', 'content' (basierend auf Inhalt) oder '0' (Element beginnt bei Null-Größe).
Was ist der Unterschied zwischen align-items und align-self?
align-items ist eine Container-Eigenschaft, die standardmäßig auf alle Flex-Elemente angewendet wird. align-self überschreibt align-items für ein einzelnes Element. Wenn beispielsweise der Container align-items: center hat, aber ein Element align-self: flex-end hat, werden alle Elemente zentriert außer diesem einen.
Was bewirkt die order-Eigenschaft?
Die order-Eigenschaft steuert die visuelle Reihenfolge von Flex-Elementen ohne die DOM-Reihenfolge zu ändern. Elemente mit einem niedrigeren order-Wert erscheinen zuerst. Der Standardwert ist 0.
Wie kopiere ich das generierte CSS?
Es gibt zwei Kopier-Buttons: einen für den Container-CSS und einen für den gesamten CSS. Klicken Sie auf einen der 'CSS kopieren' Buttons, um den Code in die Zwischenablage zu kopieren.