Flexbox Playground
Experimentieren Sie visuell mit CSS Flexbox.
Contenedor flex
/* Contenedor */
.flex-container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 8px;
}
Interaktiver CSS-Flexbox-Playground
CSS Flexbox (Flexible Box Layout) ist eines der leistungsstärksten und am häufigsten verwendeten Layout-Systeme in der modernen Webentwicklung. Es ermöglicht die flexible und vorhersagbare Verteilung von Raum und Ausrichtung von Elementen innerhalb eines Containers, selbst wenn die Größe der Elemente unbekannt oder dynamisch ist. Flexbox vereinfacht enorm Design-Aufgaben, die zuvor komplizierte Workarounds mit Floats oder Positioning erforderten.
Unser Flexbox-Playground ermöglicht das visuelle Experimentieren mit allen Eigenschaften des Flex-Containers: flex-direction (Richtung der Hauptachse), justify-content (Ausrichtung auf der Hauptachse), align-items (Ausrichtung auf der Querachse), flex-wrap (Überlaufverhalten) und gap (Abstand zwischen Elementen). Sie können auch individuelle Eigenschaften jedes Items konfigurieren: order, flex-grow, flex-shrink und align-self.
Die Vorschau wird in Echtzeit aktualisiert und zeigt sofort, wie jede Eigenschaft die Verteilung der Elemente beeinflusst. Sie können Items hinzufügen und entfernen, auf ein beliebiges Item klicken, um es auszuwählen und seine individuellen Eigenschaften zu bearbeiten, und schließlich den generierten CSS-Code kopieren, um ihn direkt in Ihrem Projekt zu verwenden. Das perfekte Tool zum Erlernen von Flexbox oder zum schnellen Prototyping von Layouts.
Häufig gestellte Fragen
Wann sollte ich Flexbox vs. Grid verwenden?
Flexbox ist ideal für eindimensionale Layouts (eine Zeile oder eine Spalte), wie Navigationsleisten, horizontale Kartenlisten oder die Ausrichtung von Elementen innerhalb eines Containers. CSS Grid eignet sich besser für zweidimensionale Layouts (Zeilen und Spalten gleichzeitig), wie vollständige Seitenlayouts oder komplexe Galerien.
Was bewirkt flex-grow?
flex-grow definiert, wie viel ein Element wachsen kann, um den verfügbaren Platz im Container zu füllen. Ein Wert von 0 (Standard) bedeutet, dass das Element nicht wächst. Wenn ein Element flex-grow: 1 hat und ein anderes flex-grow: 2, wächst das zweite doppelt so stark wie das erste.
Ist es mit allen Browsern kompatibel?
Ja, CSS Flexbox hat seit Jahren volle Unterstützung in allen modernen Browsern. Chrome, Firefox, Safari, Edge und Opera unterstützen es ohne Präfixe. Nur Internet Explorer 10-11 hatte eine teilweise und fehlerhafte Implementierung.
Mehr erfahren? Lesen Sie unseren vollständigen Leitfaden →