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

seç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:

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

.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:

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

.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:

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

.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

flex blokların eksen yönünü belirleyen flex-direction özelliği
ana eksen boyunca hizalamayı belirleyen justify-content özelliği
çapraz eksen boyunca hizalamayı belirleyen align-items özelliği
flex blokların çok satırlılığını belirleyen flex-wrap özelliği
flex-direction ve flex-wrap için kısaltma olan flex-flow özelliği
flex blokların sırasını belirleyen order özelliği
tek bir bloğun hizalamasını belirleyen align-self özelliği
belirli bir flex bloğunun boyutunu belirleyen flex-basis özelliği
flex blokların küçülme özelliğini belirleyen flex-shrink özelliği
flex-grow, flex-shrink ve flex-basis için kısaltma olan flex özelliği