flex-grow Özelliği

flex-grow özelliği, gerektiğinde tek bir flex bloğunun komşu öğelerden ne kadar daha büyük olabileceğini belirler.

Örneğin, bir flex-kapsayıcının içindeki tüm flex-blokları flex-grow:1 değerine sahipse, hepsi aynı boyutta olacaktır. Eğer bir tanesi flex-grow:2 değerine sahipse, diğerlerinin 2 katı büyüklükte olacaktır.

Eğer öğelerin toplam genişliği ebeveynin genişliğinden küçükse, sağda boş alan kalır. İstenirse bu boş alan öğelerimiz arasında orantılı olarak paylaştırılabilir. Bu, flex öğelerine atanan flex-grow özelliği ile yapılır. Bu özelliğin değeri boyutsuz bir sayıdır.

Uygulandığı yer: belirli bir flex bloğu.

Bu özellik, kısaltma özelliği olan flex'in bir parçasıdır.

Sözdizimi

cssseçici {
  flex-grow: pozitif sayı;
}

Varsayılan değer: 0.

Örnek

Şu anda genişliği 100px olan iki flex bloğumuz var. Öğelerin toplam genişliği 200px, ebeveynin genişliği ise 300px. Yani 100px boş alan kalıyor.

Eğer öğelere flex-grow atanmamışsa, bu boş alanı görürüz. Eğer atanmışsa, öğelerin gerçek genişliği belirtilenden daha büyük olacaktır - boş alanı kendi aralarında orantılı olarak paylaşacak ve kendi genişliklerine ekleyeceklerdir.

Örnek olarak, birinci öğenin flex-grow değeri 1, ikincininki ise 3 olsun. Hadi her bir öğenin boş alanın ne kadarını alacağını hesaplayalım.

İlk olarak tüm öğelerimizin flex-grow birimlerinin toplamını bulmamız gerekir. Birinci öğenin değeri 1, ikincininki ise 3. Bu, toplamın 4 olduğu anlamına gelir.

Şimdi 100px boş alanı 4'e bölelim ve bir flex-grow birimine 25px düştüğünü görelim. Sonuç olarak, ilk öğeye bir flex-grow birimi, yani 25px eklenecek, ikinci öğeye ise üç birim, yani 75px eklenecek.

Birinci öğenin genişliği 125px, ikincinin genişliği ise 175px olacaktır:

html<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
</div>

css.parent {
  display: flex;
  width: 300px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 100px;
  flex-grow: 1;
}
.elem2 {
  width: 100px;
  flex-grow: 3;
}

Результат:

Örnek

Şimdi ebeveynin genişliği 400px, ilk öğenin genişliği 200px, ikinci öğenin genişliği ise 100px olsun. Sonuç olarak, boş alan yine 100px olacaktır.

Hadi her öğeye flex-grow değerini 1 olarak atayalım. Toplam 2 olacak, yani 100px boş alan 2'ye bölünmelidir. Sonuç olarak, bir açgözlülük birimine 50px düşer.

Tüm öğeler aynı flex-grow değerine sahip olduğundan, tüm öğelere 50px eklenecektir. Bu, ilk öğenin 250px, ve ikincinin 150px olacağı anlamına gelir:

html<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
</div>

css.parent  {
  display: flex;
  width: 400px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 200px;
  flex-grow: 1;
}
.elem2 {
  width: 100px;
  flex-grow: 1;
}

Результат:

Örnek

Yine ebeveynin genişliği 400px, ilk öğenin genişliği 200px, ikinci öğenin genişliği ise 100px olsun.

Şimdi ilk öğeye flex-grow değerini 3, ikinciye ise 1 olarak ayarlayalım. Toplam açgözlülük 4 olacaktır. O zaman bir birim açgözlülük 100px / 4 = 25px'e eşittir.

İlk öğeye 75px eklenecek, ve 275px olacak, ikinciye ise 25px eklenecek, 125px olacaktır:

html<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
</div>

css.parent  {
  display: flex;
  width: 400px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 200px;
  flex-grow: 3;
}
.elem2 {
  width: 100px;
  flex-grow: 1;
}

Результат:

Ayrıca Bakınız