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

flex-grow müəyyən edir ki, element konteynerdə sərbəst boşluq olduqda nə qədər böyüyə bilər. 0 (standart) dəyəri, elementin böyüməyəcəyini göstərir. Müsbət dəyərlər, digər flex elementlərlə nisbətdə böyümə koeffisientini göstərir.

flex-shrink isə, konteynerdə sərbəst boşluq azaldıqda elementin nə qədər kiçilə biləcəyini müəyyən edir. 1 (standart) dəyəri, kiçilə biləcəyini göstərir. 0 dəyəri kiçilməni qadağan edir. Müsbət dəyərlər, digər flex elementlərlə nisbətdə kiçilmə koeffisientini göstərir.

Gəlin bir nümunəyə baxaq:

<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; /* Konteynerin eni */
}

.item {
  flex-basis: 100px; /* Hər elementin əsas ölçüsü */
  background-color: lightblue;
  margin: 5px;
}

.item-1 {
  flex-grow: 1; /* Boşluğun 1 hissəsini alacaq */
  flex-shrink: 0; /* Kiçilməyəcək */
}

.item-2 {
  flex-grow: 2; /* Boşluğun 2 hissəsini alacaq */
  flex-shrink: 1; /* Kiçilə bilər */
}

.item-3 {
  flex-grow: 1; /* Boşluğun 1 hissəsini alacaq */
  flex-shrink: 1; /* Kiçilə bilər */
}

Bu halda, elementlərin ümumi əsas ölçüsü 300px-dir (3 * 100px). Boş yer 100px-dir (400px - 300px). Bu boş yer flex-grow dəyərlərinə görə bölünür: 1 + 2 + 1 = 4. Element 1, 1/4 * 100px = 25px əlavə yer alacaq. Element 2, 2/4 * 100px = 50px əlavə yer alacaq. Element 3, 1/4 * 100px = 25px əlavə yer alacaq.

Nəticədə, elementlərin ölçüləri: Element 1: 100px + 25px = 125px Element 2: 100px + 50px = 150px Element 3: 100px + 25px = 125px

Əgər konteynerin eni kifayət qədər olmasa (məsələn, 200px), sıxılma lazım olacaq. Boş yer çatışmazlığı vəziyyətində, flex-shrink və elementlərin ölçüləri nəzərə alınır. Əskik yer, flex-shrink 0-dan böyük olan elementlər arasında, flex-shrink-in çoxluğu və flex-basis sonrası onların hazırkı ölçüsü ilə nisbətdə bölünür. Sıxılma algoritmi bir az daha mürəkkəbdir, amma əsas fikir odur ki, flex-shrink böyük olan və ya daha böyük ölçüyə malik elementlər daha çox sıxılır.

Qeyd etmək vacibdir ki, flex-basis, flex-grow və flex-shrink tez-tez flex qısa xüsusiyyəti kimi birlikdə istifadə olunur. Məsələn, flex: 1 1 auto; flex-grow: 1; flex-shrink: 1; flex-basis: auto; ilə eynidir.

Boşluğun bölüşdürülməsində prioritet:

1. flex-basis: Elementin başlanğıc ölçüsünü təyin edir.
2. flex-grow: müsbət boş alanı bölüşdürür.
3. flex-shrink: mənfi boş alanı bölüşdürür (sıxılma ehtiyacı).