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

flex-grow określa, jak bardzo element może się powiększać przy dostępnej wolnej przestrzeni w kontenerze. Wartość 0 (domyślna) oznacza, że element nie będzie się powiększał. Wartości dodatnie wskazują współczynnik wzrostu w stosunku do innych elementów flex w tym samym rzędzie.

flex-shrink określa, jak bardzo element może się kurczyć w przypadku braku wolnej przestrzeni w kontenerze. Wartość 1 (domyślna) oznacza, że może się kurczyć. Wartość 0 zabrania kurczenia się. Wartości dodatnie wskazują współczynnik kurczenia się w stosunku do innych elementów flex.

Przyjrzyjmy się przykładowi:

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

.container {
  display: flex;
  width: 400px; /* Szerokość kontenera */
}

.item {
  flex-basis: 100px; /* Podstawowy rozmiar każdego elementu */
  background-color: lightblue;
  margin: 5px;
}

.item-1 {
  flex-grow: 1; /* Będzie zajmować 1 część wolnej przestrzeni */
  flex-shrink: 0; /* Nie będzie się kurczyć */
}

.item-2 {
  flex-grow: 2; /* Będzie zajmować 2 części wolnej przestrzeni */
  flex-shrink: 1; /* Może się kurczyć */
}

.item-3 {
  flex-grow: 1; /* Będzie zajmować 1 część wolnej przestrzeni */
  flex-shrink: 1; /* Może się kurczyć */
}

W tym przypadku, łączny podstawowy rozmiar elementów wynosi 300px (3 * 100px). Wolna przestrzeń to 100px (400px - 300px). Ta przestrzeń zostanie rozdzielona między elementy 1, 2 i 3 w proporcji ich flex-grow: 1 + 2 + 1 = 4. Element 1 otrzyma 1/4 * 100px = 25px dodatkowej przestrzeni. Element 2 otrzyma 2/4 * 100px = 50px dodatkowej przestrzeni. Element 3 otrzyma 1/4 * 100px = 25px dodatkowej przestrzeni.

Ostateczne rozmiary będą: Element 1: 100px + 25px = 125px Element 2: 100px + 50px = 150px Element 3: 100px + 25px = 125px

Jeśli szerokość kontenera byłaby niewystarczająca (np. 200px), konieczne byłoby skurczenie. W przypadku braku przestrzeni do skurczenia, brane są pod uwagę flex-shrink i rozmiary elementów. Brakująca przestrzeń jest rozdzielana na elementy, których flex-shrink jest większe od 0, proporcjonalnie do ich flex-shrink pomnożonego przez ich aktualny rozmiar (po uwzględnieniu flex-basis). Algorytm skurczenia jest nieco bardziej skomplikowany, ale główna idea jest taka, że elementy z większym flex-shrink lub większym rozmiarem będą się bardziej kurczyć.

Ważne jest, aby pamiętać, że flex-basis, flex-grow i flex-shrink często są używane razem jako skrócona właściwość flex. Na przykład, flex: 1 1 auto; jest równoważne z flex-grow: 1; flex-shrink: 1; flex-basis: auto;.

Priorytet w rozdziale przestrzeni:

flex-basis: Ustawia początkowy rozmiar elementu.
flex-grow: Rozdziela dodatnią wolną przestrzeń.
flex-shrink: Rozdziela ujemną wolną przestrzeń (potrzeba skurczenia).

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