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

flex-grow i flex-shrink określają, jak elementy dostosowują swój rozmiar w sposób responsywny w obrębie kontenera flex, gdy jest dostępna wolna przestrzeń lub jej brakuje.

flex-grow - określa współczynnik, według którego element powinien się powiększać, gdy w kontenerze jest dostępna wolna przestrzeń. Domyślna wartość to 0 (element się nie rozciąga). 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.

.item {
  flex-grow: 1; /* Element wykorzysta całą dostępną wolną przestrzeń */
}

flex-shrink - określa współczynnik, według którego element powinien się kurczyć, gdy w kontenerze brakuje miejsca. Domyślna wartość to 1 (element kurczy się proporcjonalnie do innych kurczących się elementów). Wartość 0 zapobiega kurczeniu się elementu.

.item {
  flex-shrink: 0; /* Element nie będzie się kurczył */
}

Razem z flex-basis tworzą skróconą właściwość flex: flex: <flex-grow> <flex-shrink> <flex-basis>.

Przykład użycia:

<div class="container">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
</div>

.container {
  display: flex;
  width: 400px; /* Przykład stałej szerokości kontenera */
}

.item {
  flex-basis: 100px; /* Podstawowy rozmiar wszystkich elementów */
}

.item-1 {
  flex-grow: 1; /* Item 1 wykorzysta wolną przestrzeń */
}

.item-2 {
  flex-shrink: 0; /* Item 2 nie będzie się kurczył */
}

Jeśli kontener jest szerszy niż 200px (100px + 100px), item-1 zajmie całą pozostałą wolną przestrzeń. Jeśli kontener ma już 200px, item-2 zachowa swój podstawowy rozmiar 100px, a item-1 się skurczy.