Flex-grow və flex-shrink xüsusiyyətləri necə işləyir?

flex-grow və flex-shrink elementlərin, müvafiq olaraq, boş sahə və ya kifayət qədər sahə olmadıqda, flex konteynerində ölçülərini uyğunlaşdırma formasını müəyyən edir.

flex-grow - konteynerdə boş yer olduqda, elementin nə qədər böyüməli olduğunu müəyyən edən koeffisientdir. Standart dəyər 0-dır (element genişlənmir). Əgər bir neçə elementin flex-grow dəyəri 0-dan böyükdürsə, boş yer onların flex-grow dəyərlərinə görə nisbətən bölünür.

.item {
  flex-grow: 1; /* Element mövcud boş sahəni istifadə edəcək */
}

flex-shrink - kifayət qədər sahə olmadıqda, elementin nə qədər sıxılmalı olduğunu müəyyən edir. Standart dəyər 1-dir (element digər sıxılan elementlərlə nisbətən sıxılır). 0 dəyəri elementin sıxılmasını qarşısını alır.

.item {
  flex-shrink: 0; /* Element sıxılmayacaq */
}

Birlikdə flex-basis ilə, onlar flex adlı qısaldılmış xüsusiyyəti təşkil edir: flex: <flex-grow> <flex-shrink> <flex-basis>.

İstifadə nümunəsi:

<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; /* Sabit genişlikli konteyner nümunəsi */
}

.item {
  flex-basis: 100px; /* Bütün elementlərin əsas ölçüsü */
}

.item-1 {
  flex-grow: 1; /* Item 1 boş sahəni istifadə edəcək */
}

.item-2 {
  flex-shrink: 0; /* Item 2 sıxılmayacaq */
}

Əgər konteyner 200px-dən genişdirsə (100px + 100px), item-1 qalan boş sahəni alacaq. Əgər konteyner artıq 200px-dirsə, item-2 öz əsas ölçüsünü saxlayacaq və item-1 sıxılacaq.