#flex-grow

Legt fest, wie stark ein Flexbox-Element wachsen soll, wenn Platz vorhanden ist.

default flex-grow: 0;

Das Element wird nicht wachsen, wenn noch Platz vorhanden ist. Es wird nur den Platz nutzen, den es braucht.

flex-grow: 1;

Das Element wächst um den Faktor 1. Es füllt den verbleibenden Platz aus, wenn kein anderes Flexbox-Element einen flex-grow-Wert hat.

flex-grow: 2;

Da der flex-grow-Wert relativ ist, hängt sein Verhalten vom Wert des flexbox-Elements Geschwister ab.

In diesem Beispiel wird der verbleibende Platz in 3 aufgeteilt:

1 Drittel geht an den grünen Artikel
2 Drittel gehen an den rosa Artikel
Nichts geht an den gelben Gegenstand, der seine ursprüngliche Breite beibehält

Letzte Artikel von Redaktion (Alle anzeigen)

flex-grow