Jak działają właściwości flex-grow i flex-shrink…

flex-grow i flex-shrink kontrolują, jak elementy flex rozdzielają wolną przestrzeń wewnątrz kontenera flex.

flex-grow:

Określa, jaką część dostępnej wolnej przestrzeni w kontenerze flex zajmie element, jeśli taka przestrzeń istnieje.
Domyślnie flex-grow: 0, co oznacza, że element nie rośnie.
Wartość - liczba nieujemna.
Jeśli kilka elementów ma flex-grow większe od 0, wolna przestrzeń jest rozdzielana między nimi proporcjonalnie do ich wartości flex-grow.

flex-shrink:

Określa, jak bardzo element będzie się kurczył, jeśli dostępna przestrzeń w kontenerze flex jest mniejsza od sumy podstawowych rozmiarów wszystkich elementów flex.
Domyślnie flex-shrink: 1, co oznacza, że element może się kurczyć.
Wartość - liczba nieujemna.
Im większa wartość flex-shrink, tym mocniej element się kurczy w porównaniu z innymi elementami o mniejszej wartości.
Podczas kurczenia się, brana jest pod uwagę podstawowa szerokość elementu (flex-basis lub width).

Przykład:

.kontener {
  display: flex;
  width: 500px;
  /* Całkowita szerokość kontenera */
}

.element {
  flex-basis: 100px;
  /* Podstawowa szerokość każdego elementu */
}

.element:nth-child(1) {
  flex-grow: 1;
  flex-shrink: 1; /* Wartości domyślne */
}

.element:nth-child(2) {
  flex-grow: 2;
  flex-shrink: 0; /* Nie kurczy się */
}

.element:nth-child(3) {
  flex-grow: 0; /* Nie rośnie */
  flex-shrink: 2; /* Kurczy się mocniej */
}

Jeśli suma podstawowych szerokości (300px) jest mniejsza od szerokości kontenera (500px), pozostała przestrzeń (200px) zostanie rozdzielona między pierwszy i drugi element w proporcji flex-grow 1:2.

Jeśli suma podstawowych szerokości przekracza szerokość kontenera, elementy będą się kurczyć zgodnie z ich wartościami flex-shrink i podstawowymi rozmiarami. Element z flex-shrink: 0 nie będzie się kurczył.

Jak działają właściwości flex-grow i flex-shrink?