CSS'te Flex Elemanlarının Sıfır Açgözlülüğü

Eğer bir eleman için flex-grow sıfırsa, o eleman boş alanın dağıtılmasına katılmaz. Varsayılan olarak açgözlülük sıfır değerindedir ve bu nedenle flex-grow değeri belirtilmemiş elemanlar boş alanı kendi aralarında paylaşmaz.

Örnek olarak bir hesaplama yapalım. Diyelim ki her biri 100px genişliğinde üç flex elemanımız var. İlk elemanın flex-grow değeri olmasın (veya 0 olsun), ikinci elemanın flex-grow değeri 2, üçüncününki ise 3 olsun.

Ebeveynin genişliğinin 500px olduğunu varsayalım. Bu durumda boş alan 200px olur ve bir birim flex-grow başına 200px / 5 = 40px düşer. Sonuçta, dağılıma katılmadığı için ilk elemanın genişliği 100px olarak kalır, ikincinin genişliği 100px + 2 * 40px = 180px, üçüncünün genişliği ise 100px + 3 * 40px = 220px olur.

Pratik Görevler

Aşağıdaki tüm görevlerde, genişlik ve flex-grow değerlerine sahip flex elemanlarından oluşan bir kod verilecek. Verilen koda göre, her bir elemanın hangi boyutlara sahip olacağını hesaplayın. Ardından kodu çalıştırın ve elemanların gerçek genişliklerini ölçerek hesaplarınızı kontrol edin.

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

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

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

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

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem3">3</div>
	<div class="child elem4">4</div>
</div>

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