Flexbox

Vor Flexbox brauchte man Tricks, um eine Box senkrecht zu zentrieren. Mit display: flex reichen zwei Deklarationen: justify-content und align-items.

Eine Zeile oder eine Spalte

Flexbox, das CSS-Modul Flexible Box Layout, ordnet eine Gruppe von Boxen entlang einer Linie an. Setz display: flex auf einen Container, und seine direkten Kinder, die Flex-Items, reihen sich nebeneinander auf, statt sich zu stapeln. Diese eine Deklaration reicht für eine Menüleiste, eine Reihe von Buttons oder eine Karte, deren Fußzeile unten kleben soll. Flexbox arbeitet in einer Dimension auf einmal: entweder eine Zeile oder eine Spalte. Wenn du Zeilen und Spalten zusammen brauchst, ist Grid aus der nächsten Einheit meist das bessere Werkzeug.

Zwei Achsen

In Flexbox wird alles über zwei Achsen beschrieben. Die Hauptachse ist die Richtung, in der die Items fließen, festgelegt durch flex-direction: row (Standard) oder column. Die Querachse steht im rechten Winkel dazu. justify-content verteilt die Items entlang der Hauptachse: flex-start, center, flex-end, space-between (erstes und letztes Item an den Rändern, gleiche Lücken dazwischen) oder space-around. align-items positioniert sie auf der Querachse: stretch (Standard, alle Items so hoch wie das höchste), flex-start, center oder flex-end. Eine Box ist also mit justify-content: center und align-items: center in beide Richtungen zentriert.

.bar {
  display: flex;
  justify-content: space-between;  /* logo left, menu right */
  align-items: center;             /* vertically centred */
  gap: 16px;                       /* space between items */
}
.cards { display: flex; flex-wrap: wrap; gap: 12px; }
.card  { flex: 1 1 200px; }        /* grow, shrink, start at 200px */

Lücken und Umbruch

gap setzt Abstand zwischen die Items, ohne an den Außenrändern etwas hinzuzufügen. Das will man meistens, und genau das ist mit Margins umständlich. Standardmäßig bleiben Flex-Items in einer Zeile und schrumpfen, bis sie passen, auch wenn sie dabei gequetscht werden. flex-wrap: wrap lässt sie in eine neue Zeile rutschen, wenn der Platz nicht reicht. So wird aus einer Reihe von vier Karten auf dem Laptop auf dem Tablet zwei Reihen mit je zwei Karten und auf dem Handy eine einzige Spalte, ganz ohne Media Query.

Wie Items wachsen und schrumpfen

Die Kurzschreibweise flex an einem Item nimmt drei Werte. flex-grow sagt, wie viel vom übrigen Platz das Item im Vergleich zu seinen Geschwistern bekommt. flex-shrink sagt, wie bereitwillig es schrumpft, wenn der Platz knapp wird. flex-basis ist seine Ausgangsgröße vor dem Wachsen oder Schrumpfen. flex: 1 1 200px heißt: bei 200 Pixeln starten und dann zusätzlichen Platz gleichmäßig mit anderen Items teilen, die ebenfalls grow 1 haben. flex: 1 allein ist die Kurzform für 1 1 0% und macht alle Items gleich breit. Gibst du einem Item flex-grow: 2 und den anderen 1, bekommt es doppelt so viel vom übrigen Platz wie sie.

Sichtbare und echte Reihenfolge

Flexbox kann die Reihenfolge der Items ändern, mit flex-direction: row-reverse oder der Eigenschaft order, ohne das HTML anzufassen. Geh damit vorsichtig um. Tastaturfokus und Screenreader folgen weiter der Reihenfolge im HTML. Zeigt der Bildschirm also Contact vor Home, aber die Tab-Taste besucht zuerst Home, verlieren Tastaturnutzer die Orientierung. Wenn die Reihenfolge für die Bedeutung wichtig ist, ändere sie im HTML.