Was ist CSS Flexbox?
CSS Flexbox (Flexible Box Layout) ist ein eindimensionales Layout-Modell, das Platz zwischen Elementen in einem Container verteilt. Es vereinfacht die Ausrichtung, Reihenfolge und Größenbestimmung von Elementen entlang einer Hauptachse und einer Querachse und macht reaktionsfähige Layouts einfacher zu erstellen, ohne Floats oder Positioning-Hacks zu verwenden.
Wichtige Flexbox-Eigenschaften
- flex-direction: Legt die Hauptachse fest (row, column oder deren Umkehrungen).
- flex-wrap: Steuert, ob Elemente in neue Zeilen umbrechen.
- justify-content: Richtet Elemente entlang der Hauptachse aus.
- align-items: Richtet Elemente entlang der Querachse aus.
- gap: Legt den Abstand zwischen Flexbox-Elementen ohne Ränder fest.
Häufig gestellte Fragen
Wann sollte ich Flexbox anstelle von Grid verwenden?
Verwenden Sie Flexbox für eindimensionale Layouts (eine einzelne Zeile oder Spalte von Elementen). Verwenden Sie CSS Grid für zweidimensionale Layouts, bei denen Sie gleichzeitig die Kontrolle über Zeilen und Spalten benötigen.
Wird Flexbox in allen Browsern unterstützt?
Ja. CSS Flexbox wird in allen modernen Browsern wie Chrome, Firefox, Safari und Edge unterstützt. Für aktuelle Implementierungen sind keine Hersteller-Präfixe erforderlich.