Flexbox: flex-shrink für Flex-Item

Mit der CSS-Eigenschaft flex-shrink kann der Schrumpffaktor für einzelne Flex-Items festgelegt werden, der dann ausgewertet wird, wenn entlang der Hauptachse des Flex-Container nicht genug Platz für alle Flex-Items ist.

Flex-Items mit flex-shrink=0

Kind 1
Kind 2
Kind 3

Das Schrumpfen ist für alle Flex-Items ausgeschaltet, deshalb kommt es zu einem Überlauf des Flex-Container.

Flex-Items alle mit flex-shrink=1 (Default-Wert)

Kind 1
Kind 2
Kind 3

Alle Elemente haben denselben Schrumpffaktor, deswegen wird ein Überlauf des Flex-Containers vermieden und alle Flex-Items haben dieselbe Breite.

Flex-Items alle mit flex-shrink=2

Kind 1
Kind 2
Kind 3

Flex-Items mit unterschiedlichen Werten für flex-shrink (1:2:2)

Kind 1
Kind 2
Kind 3

Das erste Element hat einen kleineren Schrumpf-Faktor als die anderen beiden, deshalb ist es am breitesten.

Flex-Items mit unterschiedlichen Werten für flex-shrink (1:2:3)

Kind 1
Kind 2
Kind 3

Flex-Items mit unterschiedlichen Werten für flex-shrink (1:3:3)

Kind 1
Kind 2
Kind 3