6.4.12 CSS Multiline Flexbox
Bisher wurde die Flexbox immer nur mit einer Zeile befüllt. Es ist jedoch auch möglich, die Elemente in einer Flexbox umbrechen zu lassen, sodass sich die Inhalte entlang der Haupt- und Querachse ausrichten. Dazu muss zunächst das Umbrechen mit der Eigenschaft flex-wrap: wrap aktiviert werden. Danach werden die Elemente, die über den Rand ragen würden, in eine neue Zeile umgebrochen. Mit der Eigenschaft align-content kann nun die Verteilung der Elemente entlang der Querachse gesteuert werden.
Umbrechen der Elemente mit flex-wrap
In einer Flexbox können die Elemente durch Aktivieren von flex-wrap: wrap
in eine neue Zeile umgebrochen werden, wenn sie über den Rand hinausgehen. Zusätzlich kann mit der Eigenschaft align-content
die Verteilung der Elemente entlang der Querachse gesteuert werden.
Verteilung über beide Achsen mit 'align-content: space-between'
Sourcecode zum Beispiel
Verwenden Sie das obere Beispiel und experimentieren Sie mit den Werten für die Ausrichtung in Richtung Haupt- und Querachse. Ändern Sie die Anzahl der Elemente in der Flexbox und ändern Sie das Verhalten des Umbrechens der Elemente. Versuchen Sie ein Verständnis der Möglichkeiten der Flexbox zu bekommen.
Flexbox nutzen
Was fällt Ihnen auf, wenn Sie die Möglichkeiten der Verteilung zwischen Haupt- und Querachse vergleichen?
Lösung
Die Verteilung der Hauptachse kann nicht mit dem Wert justifycontent: stretch
gesetzt werden, so dass die Elemente ihre eigene Größe anpassen um die volle Breite der Hauptachse auszufüllen. Wie das funktioniert, sehen Sie im nächsten Absatz.
Elemente in der Flexbox wachsen lassen
In einem Flex-Container können Sie steuern, wie Flex-Elemente zusätzlichen verfügbaren Raum einnehmen, indem Sie die Eigenschaften flex-grow
, flex-shrink
und flex-basis
verwenden.
-
flex-grow
: Bestimmt, wie viel zusätzlicher Raum ein Flex-Element im Verhältnis zu anderen Flex-Elementen einnehmen soll, wenn verfügbarer Platz vorhanden ist. Ein Wert von0
bedeutet, dass das Element nicht wächst; ein positiver Wert gibt das Wachstumsverhältnis an. -
flex-basis
: Legt die Ausgangsgröße des Flex-Elements fest, bevor der verfügbare Raum verteilt wird. Sie kann in absoluten Einheiten (z. B.px
,em
), Prozent oder als Schlüsselwort (auto
,content
) angegeben werden.
Tabelle: Auswirkungen des flex-basis
-Werts
flex-basis -Wert |
Auswirkungen |
---|---|
0 |
Das Element hat initial keine Größe. Wenn alle Elemente flex-basis: 0 haben, wird der freie Raum gemäß flex-grow verteilt. |
>0px | em | % (z. B. 100px , 33% ) |
Das Element erhält die angegebene Ausgangsgröße. |
auto |
Die Größe des Elements richtet sich nach seinem Inhalt oder der definierten width /height . |
content |
Die Größe wird durch den inneren Inhalt bestimmt. |
Hinweis: Die Kombination von flex-grow
, flex-shrink
und flex-basis
kann mit der Kurzform flex
angegeben werden, z. B. flex: 1 1 auto;
.
Beispiel: Flexbox mit flex-grow
Sourcecode zum Beispiel
Zusammenfassung
Flexbox bietet durch die Möglichkeit des Umbrechens und Wachsens eine flexible Grundlage für dynamische Layouts. Möglichkeiten, wie das Schrumpfen von Elementen gibt es auch. Weitere Informationen finden sich in den Mozilla MDN Web Docs.