CSS'te Flex Elemanlarının Büyüme Özelliği
Şu anda yan yana dizilmiş iki flex bloğumuz olduğunu varsayalım.
Bu bloklara 100px genişlik verilmiş ve ebeveynlerine - 300px:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
</div>
.parent {
display: flex;
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Gördüğünüz gibi, elemanlarımızın toplam genişliği ebeveynin genişliğinden daha az, bu nedenle sağda boş alan kalıyor.
İstenirse bu boş alan, elemanlarımız arasında
orantılı olarak paylaştırılabilir.
Bu, flex elemanlarına verilen flex-grow
özelliği ile yapılır. Bu özelliğin değeri
boyutsuz bir sayıdır.
Hadi pratikte bu özelliğin nasıl çalıştığını görelim.
Örnek
Şu anda 100px genişliğinde iki flex bloğumuz var.
Elemanların toplam genişliği
200px, ebeveynin genişliği ise 300px.
Yani, 100px serbest alan kalıyor.
Eğer elemanlara flex-grow verilmemişse,
bu serbest alanı olduğu gibi görürüz.
Eğer verilmişse, elemanların gerçek genişliği
verilenden daha büyük olacaktır - serbest alanı
kendi aralarında orantılı olarak paylaşacak
ve kendi genişliklerine ekleyeceklerdir.
Örnek olarak, birinci elemanın flex-grow
değeri 1, ikincininki ise 3 olsun. Hadi
hesaplayalım, her bir eleman serbest alanın ne kadarını alacak.
Öncelikle tüm elemanlarımızın toplam flex-grow
birim sayısını bulmalıyız.
Birinci elemanın değeri 1,
ikincininki ise 3. Bu, toplamın 4 olduğu anlamına gelir.
Şimdi 100px serbest alanı
4'e bölelim ve bir flex-grow birimine
25px düştüğünü görelim. Sonuç olarak,
birinci elemana bir flex-grow birimi,
yani 25px eklenecek,
ikinci elemana ise üç birim, yani
75px eklenecek.
Birinci elemanın genişliği 125px,
ikincininki ise 175px olacak:
<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ğinin 400px,
birinci elemanın genişliğinin 200px,
ikinci elemanın genişliğinin ise 100px olduğunu varsayalım.
Sonuç olarak, serbest alan yine
100px'dir.
Hadi her elemana 1 değerinde
flex-grow verelim. Toplamda 2 olur,
yani 100px serbest alan
2'ye bölünmelidir. Sonuçta, bir büyüme birimine
50px düşer.
Tüm elemanların flex-grow değeri aynı olduğundan,
tüm elemanlara aynı miktarda, yani 50px eklenecektir.
Bu, birinci elemanın 250px,
ikinci elemanın ise 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ğinin 400px,
birinci elemanın genişliğinin 200px,
ikinci elemanın genişliğinin ise 100px olduğunu varsayalım.
Şimdi birinci elemana flex-grow değerini
3, ikinci elemana ise 1 olarak ayarlayalım.
Toplam büyüme değeri 4 olur.
O zaman bir büyüme birimi 100px / 4 = 25px
Birinci elemana 75px eklenecek,
ve 275px olacak, ikinci elemana ise
25px eklenecek, 125px olacak:
<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;
}
:
Pratik Görevler
Aşağıdaki tüm görevlerde, genişliği ve flex-grow
değeri olan flex elemanları içeren bir kod verilecektir.
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: 3;
}
.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: 700px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 100px;
flex-grow: 1;
}
.elem2 {
width: 100px;
flex-grow: 2;
}
.elem3 {
width: 200px;
flex-grow: 3;
}
<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: 100px;
flex-grow: 1;
}
.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 class="child elem4">4</div>
</div>
.parent {
display: flex;
width: 1000px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 200px;
flex-grow: 1;
}
.elem2 {
width: 100px;
flex-grow: 2;
}
.elem3 {
width: 100px;
flex-grow: 4;
}
.elem4 {
width: 100px;
flex-grow: 3;
}
