CSS Flexbox

CSS Flexbox (Flexible Box Layout) ist ein eindimensionales CSS-Layout-System, das Elemente entlang einer Achse — horizontal oder vertikal — flexibel anordnet, ausrichtet und verteilt.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: Web Design · Niveau: Fortgeschritten Synonyme / Auch bekannt als: Flexible Box Model, Flexbox Layout, CSS Flexible Box

Was ist CSS Flexbox?

CSS Flexbox wurde 2012 als offizieller W3C-Standard eingeführt und löste damit jahrelange Probleme mit Float-Layouts, clearfix-Hacks und vertikaler Zentrierung. Das Grundprinzip: Ein Flex-Container bestimmt, wie seine direkten Kindelemente — die Flex-Items — entlang einer einzigen Achse angeordnet werden. Flexbox ist damit ideal für Navigationsbars, Komponentenlayouts, Formulare und alle Situationen, in denen Elemente in einer Linie oder Zeile angeordnet werden sollen.

Erklärung

Container und Achsen

Flexbox aktiviert man mit display: flex auf dem Elternelement. Sofort werden alle direkten Kinder zu Flex-Items und ordnen sich standardmäßig in einer horizontalen Reihe an.

Flexbox operiert auf zwei Achsen:

• Hauptachse (Main Axis): Die primäre Richtung — standardmäßig horizontal (links nach rechts)
• Kreuzachse (Cross Axis): Senkrecht zur Hauptachse — standardmäßig vertikal

Die Richtung wird mit flex-direction bestimmt:

• row (Standard): Elemente horizontal angeordnet
• column: Elemente vertikal angeordnet
• row-reverse / column-reverse: Umgekehrte Reihenfolge

Justify-Content: Ausrichtung auf der Hauptachse

justify-content steuert, wie Elemente entlang der Hauptachse verteilt werden:

• flex-start: Elemente am Anfang gebündelt (Standard)
• flex-end: Elemente am Ende gebündelt
• center: Elemente zentriert
• space-between: Erstes und letztes Element an den Rändern, gleichmäßige Abstände dazwischen
• space-around: Gleicher Abstand um jedes Element
• space-evenly: Alle Abstände (auch zu den Rändern) gleich groß

Align-Items: Ausrichtung auf der Kreuzachse

align-items kontrolliert die Ausrichtung senkrecht zur Hauptachse:

• stretch (Standard): Elemente strecken sich auf volle Container-Höhe
• flex-start: Elemente oben ausgerichtet
• flex-end: Elemente unten ausgerichtet
• center: Elemente vertikal zentriert
• baseline: Elemente an der Textgrundlinie ausgerichtet

Das berühmte zentrierte-Element-Problem löst sich mit Flexbox in zwei Zeilen:

``css .container { display: flex; justify-content: center; align-items: center; } ``

Flex-Wrap

Standardmäßig quetscht Flexbox alle Items in eine Zeile. Mit flex-wrap: wrap dürfen Items in neue Zeilen umbrechen — nützlich für responsive Layouts:

``css .nav { display: flex; flex-wrap: wrap; gap: 1rem; } ``

Flex-Items steuern

Einzelne Items können mit eigenen Eigenschaften angepasst werden:

• `flex-grow`: Anteil, um den ein Item wächst, wenn freier Platz vorhanden ist (0 = kein Wachstum, 1 = proportionales Wachstum)
• `flex-shrink`: Wie stark ein Item schrumpft, wenn nicht genug Platz vorhanden ist
• `flex-basis`: Ausgangsgröße des Items vor dem Verteilen von freiem Platz
• Kurzform `flex`: flex: 1 entspricht flex: 1 1 0 — das Item wächst und schrumpft gleichmäßig

``css .sidebar { flex: 0 0 300px; } /* Fixe Breite, wächst und schrumpft nicht */ .main { flex: 1; } /* Füllt den restlichen Platz */ ``

Order

Mit order lässt sich die visuelle Reihenfolge von Items ändern, ohne das HTML anzupassen — nützlich für responsive Layouts, bei denen mobile Ansichten eine andere Reihenfolge brauchen.

Beispiele

Horizontale Navigation: ``css nav { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; } ``

Karten-Layout mit gleichhohen Karten: ```css .card-grid { display: flex; flex-wrap: wrap; gap: 1.5rem; }

.card { flex: 1 1 300px; display: flex; flex-direction: column; }

.card-footer { margin-top: auto; / Footer immer unten / } ```

In der Praxis

Flexbox ist das meistgenutzte CSS-Layout-System überhaupt. Jedes UI-Framework — Bootstrap, Tailwind CSS, Material UI — baut maßgeblich auf Flexbox auf. Für Frontend-Entwickler und Designer mit Coding-Kenntnissen ist Flexbox-Kompetenz absolut grundlegend.

Besonders häufig wird Flexbox eingesetzt für:

• Navigationsbars und Menüs
• Formulare und Eingabegruppen
• Button-Gruppen und Toolbars
• Medien-Objekte (Icon + Text nebeneinander)
• Footer-Layouts
• Vertikal und horizontal zentrierte Overlays

Vergleich & Abgrenzung

Flexbox ist inhaltsbasiert: Die Elemente selbst bestimmen maßgeblich das Layout. CSS Grid ist layoutbasiert: Der Designer definiert das Raster, Inhalte passen sich ein. Beide Systeme werden im professionellen Web Design kombiniert.

Häufige Fragen (FAQ)

Warum funktioniert `align-items: center` nicht? Häufige Ursache: Der Container hat keine definierte Höhe. Ohne Höhe ist die Kreuzachse nicht vorhanden, und Zentrierung hat keinen Effekt. height: 100vh oder min-height am Container setzen.

Wann soll ich Flexbox, wann Grid verwenden? Faustregel: Flexbox für eindimensionale Komponenten (Navigation, Buttongruppen), Grid für zweidimensionale Seitenlayouts (Header-Sidebar-Main-Footer). In der Praxis werden beide oft kombiniert.

Ist Flexbox vollständig in allen Browsern unterstützt? Ja. Laut caniuse.com (2024) unterstützen über 99 % aller aktiv genutzten Browser Flexbox vollständig. Es ist eine der sichersten CSS-Technologien überhaupt.

Verwandte Einträge

• CSS Grid Layout — Das zweidimensionale Gegenstück zu Flexbox
• Responsive Design – flexible Layouts für alle Bildschirmgrößen — Flexbox in Kombination mit Media Queries
• Web Design Grundlagen — Einführung in Layouts und CSS
• Design System für Web — Flexbox als Basis für Komponenten-Bibliotheken

Weiterführend

• Verou, Lea: CSS Secrets, O'Reilly Media, 2015
• Frain, Ben: Enduring CSS, Leanpub, 2016
• MDN Web Docs: Flexbox — developer.mozilla.org (laufend aktualisiert)
• CSS-Tricks: A Complete Guide to Flexbox, css-tricks.com, 2013 (laufend aktualisiert)
• Wathan, Adam: Tailwind CSS Documentation — tailwindcss.com, 2023