CSS-də Fleks Elementlərinin Hərisliyi
Tutaq ki, indi iki fleks blokumuz var,
sıra ilə düzülüb. Bu bloklara 100px en verilib,
valideyninə isə - 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üyünüz kimi, elementlərimizin ümumi eni valideynin enindən azdır, buna görə də sağda boş yer qalır.
İstəsək, bu boş yeri elementlərimiz arasında
mütənasib bölmək olar.
Bu, fleks elementlərinə tətbiq edilən
flex-grow xassəsi vasitəsilə edilir.
Bu xassənin qiyməti ölçüsüz rəqəmdir.
Gəlin praktikada bu xassənin necə işlədiyini görək.
Nümunə
Hal-hazırda iki fleks blokumuz var, eni
100px. Elementlərin ümumi eni
200px, valideynin eni isə - 300px.
Belə çıxır ki, 100px sərbəst yer qalır.
Əgər elementlərə flex-grow təyin edilməyibsə,
onda biz sadəcə bu sərbəst yeri görərik.
Əgər təyin edilibsə, onda elementlərin həqiqi eni
təyin ediləndən daha çox olacaq - onlar sərbəst yeri
öz aralarında mütənasib bölüşdürəcək və
öz eninə əlavə edəcəklər.
Nümunə üçün tutaq ki, birinci elementin flex-grow
qiyməti 1, ikincininki isə 3. Gəlin
hesablayaq, hər bir element sərbəst məkanın hansı hissəsini
alacaq.
Əvvəlcə bütün elementlərimizin flex-grow
vahidlərinin ümumi miqdarını almaq lazımdır.
Birinci elementdə 1, ikincidə isə
3. Bu o deməkdir ki, cəmi 4 edir.
İndi 100px sərbəst yeri 4-ə bölək
və alaq ki, bir flex-grow vahidinə 25px düşür.
Belə çıxır ki, birinci elementə bir flex-grow
vahidi, yəni 25px, ikinci elementə isə üç vahid,
yəni 75px əlavə olunacaq.
Birinci elementin eni 125px, ikincininki isə
175px olacaq:
<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;
}
:
Nümunə
Tutaq ki, indi valideynin eni 400px,
birinci elementin eni 200px, ikinci elementin
eni isə 100px. Belə çıxır ki,
sərbəst yer yenə 100px-ə bərabərdir.
Gəlin hər bir elementə flex-grow-u
1 olaraq təyin edək. Cəmi 2 alınacaq,
yəni 100px sərbəst yeri 2-ə bölmək lazımdır.
Belə çıxır ki, bir hərislik vahidinə 50px düşür.
Bütün elementlərin flex-grow qiyməti eyni olduğundan,
bütün elementlərə eyni 50px dəyəri əlavə olunacaq.
Bu o deməkdir ki, birinci element 250px, ikinci
element isə 150px olacaq:
<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;
}
:
Nümunə
Tutaq ki, yenə valideynin eni 400px,
birinci elementin eni 200px, ikinci elementin
eni isə 100px.
Gəlin indi birinci elementə flex-grow-u
3, ikinciyə isə 1 olaraq təyin edək.
Belə çıxır ki, ümumi hərislik 4-ə bərabərdir.
Onda bir hərislik vahidi 100px / 4 = 25px
Birinci elementə 75px əlavə olunacaq,
və o 275px olacaq, ikinciyə isə
25px əlavə olunacaq, o 125px olacaq:
<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;
}
:
Praktiki Tapşırıqlar
Aşağıdakı bütün tapşırıqlarda sizə eni və
flex-grow olan fleks elementləri olan
müəyyən bir kod təqdim olunacaq. Təqdim olunan
koda əsasən, hər bir elementin hansı ölçülərə
malik olacağını hesablayın. Sonra kodu işə salın
və elementlərin həqiqi enlərini ölçərək
hesablamalarınızı yoxlayın.
<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;
}
