CSS Flexbox – offiziell das Flexible Box Layout Module – ist eines der wichtigsten Werkzeuge im modernen Webdesign. Es löst das Problem der flexiblen Anordnung und Ausrichtung von Elementen innerhalb eines Containers auf elegante Weise.
Grundprinzip von Flexbox
Flexbox basiert auf dem Konzept eines Flex-Containers (display: flex) und seiner Kindelemente, den Flex-Items. Der Container definiert eine Hauptachse (standardmäßig horizontal) und eine Querachse. Items werden entlang der Hauptachse angeordnet und können durch verschiedene Eigenschaften gesteuert werden.
Die Stärke von Flexbox liegt in der automatischen Platzverteilung: Items können wachsen (flex-grow), schrumpfen (flex-shrink) und eine Basisgröße (flex-basis) haben. So passen sie sich dynamisch an den verfügbaren Platz an.
Wichtige Flexbox-Eigenschaften
Container-Eigenschaften
- flex-direction: Bestimmt die Richtung der Hauptachse (row, column)
- justify-content: Verteilung entlang der Hauptachse (center, space-between, space-around)
- align-items: Ausrichtung entlang der Querachse (center, stretch, flex-start)
- flex-wrap: Erlaubt Umbruch in mehrere Zeilen
- gap: Definiert Abstände zwischen Items
Item-Eigenschaften
- flex-grow: Wie stark ein Item wachsen darf
- flex-shrink: Wie stark ein Item schrumpfen darf
- order: Reihenfolge unabhängig vom HTML ändern
- align-self: Individuelle Ausrichtung eines Items
Typische Einsatzgebiete
Flexbox ist die erste Wahl für Navigationsleisten, bei denen Items gleichmäßig verteilt oder zentriert werden sollen. Auch für Breadcrumb-Navigationen, Kartenreihen, Formularzeilen und Footer-Layouts ist Flexbox ideal.
Besonders häufig kommt Flexbox bei der vertikalen Zentrierung zum Einsatz – ein Problem, das vor Flexbox Entwickler jahrelang mit Workarounds lösen mussten. Heute genügen drei Zeilen CSS.
Flexbox und Responsive Design
Durch die Kombination von flex-wrap und relativen Größenangaben eignet sich Flexbox hervorragend für Responsive Design. Items können automatisch umbrechen, wenn der Platz nicht ausreicht. In Verbindung mit Media Queries entstehen flexible Layouts für alle Bildschirmgrößen.
Flexbox in der Praxis
Moderne Frameworks wie Tailwind CSS bieten intuitive Utility-Klassen für Flexbox (flex, justify-center, items-center). In Kombination mit CSS Grid entsteht ein mächtiges Layout-System: Grid für das Seitenlayout, Flexbox für die Komponentenebene.
Innerhalb eines Design Systems bildet Flexbox die Basis für konsistente Komponentenlayouts. Von der Hero Section bis zum CTA-Button – Flexbox sorgt für pixelgenaue Ausrichtung auf allen Geräten.