Jak można elastycznie zmieniać rozmiary elementów…

Możesz elastycznie zmieniać rozmiary elementów w flexbox, korzystając z właściwości flex-grow, flex-shrink i flex-basis.

flex-grow: Określa, jak bardzo element może się rozciągać, zajmując wolną przestrzeń w kontenerze. Domyślna wartość to 0 (nie rozciąga się). Wyższa wartość oznacza większy współczynnik rozciągania w porównaniu do innych elementów.
flex-shrink: Określa, jak bardzo element może się kurczyć w przypadku braku wolnej przestrzeni. Domyślna wartość to 1 (kurczy się). Wyższa wartość oznacza większy współczynnik kurczenia.
flex-basis: Określa podstawowy rozmiar elementu przed rozdzieleniem wolnej przestrzeni. Może być ustawiony jako wartość stała (px, %, rem) lub słowo kluczowe (auto, content).

Te trzy właściwości często łączy się w skróconej właściwości flex: flex: <flex-grow> <flex-shrink> <flex-basis>;.

Przykłady użycia:

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

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

/* Element ma podstawowy rozmiar 100px i rozciąga się, jeśli jest miejsce */
.flex-item {
  flex: 1 1 100px;
}

/* Element ma rozmiar bazowy określony przez zawartość i może się kurczyć */
.flex-item {
  flex: 0 1 auto; /* Równoważne z flex: initial; */
}

/* Element nie rozciąga się, nie kurczy i ma rozmiar bazowy określony przez zawartość */
.flex-item {
  flex: 0 0 auto; /* Równoważne z flex: none; */
}

/* Element rozciąga się, kurczy i ma rozmiar bazowy 0 (przydatne do tworzenia elementów o tej samej szerokości) */
.flex-item {
  flex: 1 1 0; /* Równoważne z flex: auto; */
}

Użycie tych właściwości pozwala precyzyjnie kontrolować zachowanie elementów wewnątrz kontenera flex przy zmianie rozmiaru ekranu lub zawartości.

Jak można elastycznie zmieniać rozmiary elementów korzystających z flexbox?