CSS Flexbox: display: flex, justify-content und align-items – das Layout-Modul für eine Achse

Der Flex-Container: display: flex

display: flex auf einem Element macht es zum Flex-Container; seine Kinder werden Flex-Items. Von diesem Moment an gelten für die Kinder nicht mehr die Regeln des normalen Flusses: Sie stehen nebeneinander auf der Hauptachse, float und clear wirken auf sie nicht, vertikale Außenabstände fallen nicht mehr zusammen, und margin: auto verteilt freien Platz auch vertikal. Die Hauptachse läuft standardmäßig von links nach rechts; flex-direction: column dreht sie nach unten.

.leiste {
  display: flex;
  gap: 1em;                 /* Abstand zwischen den Items */
}

justify-content und align-items: Ausrichtung auf zwei Achsen

justify-content verteilt die Items entlang der Hauptachse: flex-start, center, flex-end, oder den freien Platz zwischen ihnen mit space-between, space-around und space-evenly. align-items richtet sie auf der Querachse aus: stretch (Ausgangswert, alle gleich hoch), flex-start, center, flex-end oder baseline. Ein Item horizontal und vertikal zu zentrieren, wofür CSS 2.1 absolute Positionierung und negative Außenabstände brauchte, sind hier zwei Deklarationen am Container.

flex-grow, flex-shrink, flex-basis: wie Items ihren Platz teilen

Die Kurzform flex fasst drei Werte zusammen. flex-basis ist die Ausgangsgröße eines Items auf der Hauptachse, flex-grow sagt, welchen Anteil am freien Platz es bekommt, flex-shrink, wie stark es schrumpft, wenn der Platz nicht reicht. flex: 1 bedeutet 1 1 0: alle Items teilen sich den Container gleichmäßig, unabhängig von ihrem Inhalt. flex: 0 0 200px ist eine feste Spalte. Eine Seitenleiste fest und der Inhalt flexibel – die Aufgabe, für die CSS 2.1 einen Float mit Außenabstand am Nachbarn brauchte – ist damit zwei Zeilen.

.seite   { flex: 0 0 16em; }
.inhalt  { flex: 1; min-width: 0; }

min-width: 0 auf dem flexiblen Item ist kein Zierrat: Flex-Items haben den Ausgangswert min-width: auto und schrumpfen nicht unter ihre Inhaltsbreite – ein langes Wort oder eine breite Tabelle sprengt sonst das Layout.

flex-wrap: Umbruch statt Überlauf

Standardmäßig bleiben alle Items in einer Zeile und schrumpfen. flex-wrap: wrap erlaubt den Umbruch in weitere Zeilen; align-content verteilt dann die Zeilen auf der Querachse. Zusammen mit einer flex-basis in einer festen Einheit ergibt das ein Raster, das ohne Media Query von drei auf zwei auf eine Spalte fällt, sobald die Basis nicht mehr in den Container passt.

order und die Reihenfolge beim Vorlesen

Die Eigenschaft order verschiebt ein Item innerhalb seines Containers, ohne den Quelltext anzufassen: Alle Items haben von Haus aus den Wert null und werden in Quelltextreihenfolge angeordnet; ein kleinerer Wert zieht nach vorn, ein größerer nach hinten. Das wirkt wie ein bequemer Weg, auf schmalen Bildschirmen eine Randspalte über den Inhalt zu heben.

Der Haken ist, dass nur die Darstellung sich ändert. Die Sprachausgabe liest weiter in Quelltextreihenfolge, und die Tabulatortaste springt ebenfalls in dieser Reihenfolge – der Fokus wandert dann von oben nach unten quer über den Bildschirm. Für Leser, die sehen und tippen, ergibt das eine Reihenfolge, die nicht der ist, die sie vor sich haben. Deshalb gilt: order ist für Fälle gedacht, in denen die Reihenfolge keine Bedeutung trägt – eine Reihe gleichrangiger Karten etwa. Wo sie Bedeutung trägt, gehört sie in den Quelltext, und das Layout richtet sich danach.

Warum ein Item nicht kleiner wird als sein Inhalt

Eine der meistgestellten Fragen zu Flexbox lautet, warum ein Item mit langem Text die Reihe auseinanderdrückt, obwohl flex-shrink auf eins steht. Die Ursache liegt nicht bei Flexbox, sondern beim Ausgangswert der Mindestbreite: Für ein Flex-Item ist min-width: auto, und das bedeutet die Breite des unumbrechbaren Inhalts. Das Item darf also schrumpfen – aber nicht unter das längste Wort, das kürzeste Bild oder die schmalste Tabelle darin.

Die Abhilfe ist eine Zeile: min-width: 0 am Item, in einer Spalte entsprechend min-height: 0. Danach greift das Schrumpfen wie erwartet, und ein Text mit abgeschnittenem Überlauf verhält sich wieder wie gedacht. Derselbe Ausgangswert erklärt, warum ein Rollbereich innerhalb eines Flex-Containers manchmal nicht rollt, sondern seinen Elternteil aufbläht – auch dort ist die automatische Mindestgröße der Grund, und auch dort ist die Null die Antwort.

Flexbox und CSS 2.1: was sich für Floats ändert

Floats bleiben, wofür sie gedacht waren: ein Bild vom Text umfließen lassen. Für Leisten, Spalten und ausgerichtete Gruppen ist Flexbox das richtige Werkzeug, weil der Container die Ordnung bestimmt und kein Clearfix nötig ist. Für zweidimensionale Layouts – Zeilen und Spalten zugleich – ist Grid zuständig. Die Tutorials Layout mit div und Navigation aus Listen zeigen die Aufgaben, die Flexbox heute übernimmt.

Häufige Fragen