Wachsende Items

Die Karten brechen jetzt schön um, aber jede Zeile endet mit etwas freiem Platz rechts. Es sähe besser aus, wenn die Karten die ganze Zeile füllten.

Wie viel vom freien Platz ein Item bekommt, legt die Eigenschaft flex-grow fest. Diesmal ist es eine Eigenschaft des Flex-Items, nicht des Containers. Ihr Wert ist eine Zahl:

• 0: Das Item wächst nicht. Das ist der Standard.
• 1: Das Item wächst und bekommt einen Anteil am freien Platz. Wenn mehrere Items in einer Zeile flex-grow: 1 haben, teilen sie sich den freien Platz gleichmäßig.
• Eine größere Zahl bedeutet einen größeren Anteil: Ein Item mit flex-grow: 2 bekommt doppelt so viel vom freien Platz wie ein Item mit flex-grow: 1.

Alle unsere Karten beginnen bei 12rem. Wenn jede Karte in einer Zeile denselben Anteil am freien Platz bekommt, sind sie am Ende gleich breit und füllen die ganze Zeile.

Du wirst oft die Kurzschreibweise flex: 1 sehen. Sie setzt ebenfalls flex-grow: 1, gibt dem Item aber auch eine Ausgangsgröße von null statt seiner Breite. Die Breite wird dann ignoriert, und alle Items mit flex: 1 teilen sich die ganze Zeile gleichmäßig. Das ist praktisch, zum Beispiel für eine Hauptspalte, die den Platz neben einer Seitenleiste mit fester Breite füllen soll:

.seitenleiste {
	width: 15rem;
}

.hauptspalte {
	flex: 1;
}

Unsere Karten brauchen allerdings ihre Breite: Sie sagt dem Browser, wann eine Karte nicht mehr in die Zeile passt und umbrechen muss. Deshalb verwenden wir für sie flex-grow: 1.