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

flex-grow və flex-shrink flex elementlərinin boş sahəni flex konteyner daxilində necə bölüşdürəcəyini idarə edir.

flex-grow:

Flex konteynerdə mövcud olan sərbəst sahənin hansı hissəsinin element tərəfindən alınacağını müəyyən edir, əgər sərbəst sahə varsa.
Standart dəyər flex-grow: 0, bu da elementin böyümədiyi anlamına gəlir.
Dəyər - sıfır olmayan müsbət ədəddir.
Əgər bir neçə elementin flex-grow dəyəri 0-dan böyükdürsə, sərbəst sahə onların flex-grow dəyərlərinə nisbətdə bölüşdürülür.

flex-shrink:

Əgər flex konteynerdə mövcud olan sahə, bütün flex elementlərinin əsas ölçülərinin cəmindən azdırsa, elementin nə qədər sıxılacağını müəyyən edir.
Standart dəyər flex-shrink: 1, bu da elementin sıxıla biləcəyini göstərir.
Dəyər - sıfır olmayan müsbət ədəddir.
flex-shrink dəyəri nə qədər böyükdürsə, element digər elementlərə nisbətən o qədər çox sıxılır.
Sıxılma zamanı, elementin əsas eni (flex-basis və ya width) nəzərə alınır.

Nümunə:

.konteyner {
  display: flex;
  width: 500px;
  /* Konteynerin ümumi eni */
}

.element {
  flex-basis: 100px;
  /* Hər elementin əsas eni */
}

.element:nth-child(1) {
  flex-grow: 1;
  flex-shrink: 1; /* Standart dəyərlər */
}

.element:nth-child(2) {
  flex-grow: 2;
  flex-shrink: 0; /* Sıxılmır */
}

.element:nth-child(3) {
  flex-grow: 0; /* Böyümür */
  flex-shrink: 2; /* Daha çox sıxılır */
}

Əgər əsas eni cəm (300px) konteynerin eni (500px)-dən azdırsa, qalan sahə (200px) ilk və ikinci elementlər arasında flex-grow 1:2 nisbətində bölüşdürüləcək.

Əgər əsas eni cəm konteynerin enindən çoxdursa, elementlər flex-shrink dəyərlərinə və əsas ölçülərinə uyğun olaraq sıxılır. flex-shrink: 0 olan element sıxılmayacaq.

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