Wie funktionieren die Eigenschaften flex-grow und…

flex-grow und flex-shrink steuern, wie Flex-Elemente den freien Raum innerhalb des Flex-Containers verteilen.

flex-grow:

Bestimmt, welchen Anteil des verfügbaren freien Raums im Flex-Container das Element einnimmt, falls freier Raum vorhanden ist.
Standardmäßig flex-grow: 0, was bedeutet, dass das Element nicht wächst.
Wert - nicht-negative Zahl.
Wenn mehrere Elemente flex-grow größer als 0 haben, wird der freie Raum proportional zu ihren flex-grow-Werten verteilt.

flex-shrink:

Bestimmt, wie stark das Element schrumpft, wenn der verfügbare Raum im Flex-Container kleiner ist als die Summe der Basissgrößen aller Flex-Elemente.
Standardmäßig flex-shrink: 1, was bedeutet, dass das Element schrumpfen kann.
Wert - nicht-negative Zahl.
Je größer flex-shrink, desto stärker schrumpft das Element im Vergleich zu anderen Elementen mit kleinerem Wert.
Beim Schrumpfen wird die BasisschWidth des Elements (flex-basis oder width) berücksichtigt.

Beispiel:

.container {
  display: flex;
  width: 500px;
  /* Gesamttiefe des Containers */
}

.item {
  flex-basis: 100px;
  /* BasisschWidth jedes Elements */
}

.item:nth-child(1) {
  flex-grow: 1;
  flex-shrink: 1; /* Standardwerte */
}

.item:nth-child(2) {
  flex-grow: 2;
  flex-shrink: 0; /* Wird nicht geschrumpft */
}

.item:nth-child(3) {
  flex-grow: 0; /* Wächst nicht */
  flex-shrink: 2; /* Wird stärker geschrumpft */
}

Wenn die Summe der BasisschWidth (300px) kleiner ist als die Breite des Containers (500px), wird der verbleibende Raum (200px) zwischen dem ersten und zweiten Element im Verhältnis flex-grow 1:2 verteilt.

Wenn die Summe der BasisschWidth größer ist als die Breite des Containers, werden die Elemente entsprechend ihren flex-shrink-Werten und BasisschWidth verkleinert. Das Element mit flex-shrink: 0 wird nicht geschrumpft.

Wie funktionieren die Eigenschaften flex-grow und flex-shrink?