Flexbox: flex-grow für Flex-Item

Wenn in einem Flex-Container noch Platz entlang der Hauptachse ist, dann wird dieser auf Flex-Elemente mit einem flex-grow-Wert größer-gleich 1 verteilt, und zwar im Verhältnis der flex-grow-Werte. Elemente mit flex-grow:0 nehmen keinen zusätzlichen Platz ein, negative Werte sind nicht zulässig.

Flex-Items ohne flex-grow

Kind 1
Kind 2

Flex-Items mit flex-grow (1:1)

Kind 1
Kind 2

Flex-Items mit flex-grow (1:2)

Kind 1
Kind 2

Flex-Items mit flex-grow (1:3)

Kind 1
Kind 2

Flex-Items mit flex-grow (1:2:1)

Kind 1
Kind 2
Kind 3

Flex-Items mit flex-grow (1:2:2)

Kind 1
Kind 2
Kind 3

Flex-Items mit flex-grow (0:1:1)

Kind 1
Kind 2
Kind 3