CSS dagi Fleks Elementlarning Ochko'zligi
Hozirda bizda qatorda joylashgan ikkita fleks-blok bor deb faraz qilaylik.
Ushbu bloklar uchun 100px kenglik belgilangan, ularning ota-onasi uchun esa - 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;
}
:
Ko'rib turganingizdek, elementlarimizning umumiy kengligi ota-onasining kengligidan kam, shuning uchun o'ng tomonda bo'sh joy qoladi.
Agar xohlasangiz, ushbu bo'sh joyni
bizning elementlarimiz o'rtasida mutanosib taqsimlash mumkin.
Bunga flex-grow xususiyati yordamida erishiladi,
u fleks-elementlarga tayinlanadi. Ushbu xususiyatning qiymati
o'lchovsiz son hisoblanadi.
Keling, bu xususiyat qanday ishlashini amalda ko'rib chiqaylik.
Misol
Hozirda bizda kengligi 100px bo'lgan ikkita fleks-blok mavjud.
Elementlarning umumiy kengligi 200px, ota-onaning kengligi esa - 300px.
Demak, 100px bo'sh joy qoladi.
Agar elementlarga flex-grow tayinlanmagan bo'lsa,
biz shunchaki ushbu bo'sh joyni ko'ramiz.
Agar u ularga tayinlangan bo'lsa, unda elementlarning haqiqiy kengligi
belgilanganidan katta bo'ladi - ular bo'sh joyni o'zaro mutanosib taqsimlab,
uni o'z kengligiga qo'shadilar.
Misol uchun, birinchi elementning flex-grow
qiymati 1, ikkinchisiniki esa - 3 bo'lsin. Keling,
har bir element qancha bo'sh joy olishini hisoblab chiqaylik.
Boshlash uchun bizning barcha elementlarimizning
flex-grow birliklarining umumiy miqdorini olishimiz kerak.
Birinchi element uchun u 1, va
ikkinchi element uchun - 3. Bu shuni anglatadiki, jami
u 4 ga teng.
Endi 100px bo'sh joyni
4 ga bo'lamiz va flex-grow ning har bir birligiga 25px to'g'ri kelishini topamiz. Demak,
birinchi elementga flex-grow ning bitta birligi,
ya'ni 25px qo'shiladi, va
ikkinchisiga - uch birlik, ya'ni
75px qo'shiladi.
Birinchi elementning kengligi 125px bo'ladi,
ikkinchisiniki esa - 175px:
<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;
}
:
Misol
Endi ota-onaning kengligi 400px,
birinchi elementning kengligi 200px, ikkinchi elementning kengligi esa - 100px bo'lsin. Demak,
bo'sh joy yana
100px ga teng.
Keling, har bir elementga flex-grow ni,
1 ga teng deb belgilaylik. Jami 2 bo'ladi,
ya'ni 100px bo'sh joyni
2 ga bo'lish kerak. Demak, har bir
ochko'zlik birligiga 50px to'g'ri keladi.
flex-grow qiymati barcha elementlar uchun bir xil bo'lgani uchun,
barcha elementlarga 50px teng qiymat qo'shiladi. Bu shuni anglatadiki,
birinchi element 250px bo'ladi, va
ikkinchi element 150px bo'ladi:
<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;
}
:
Misol
Yana ota-onaning kengligi 400px,
birinchi elementning kengligi 200px, ikkinchi elementning kengligi esa - 100px bo'lsin.
Keling, endi birinchi element uchun
flex-grow ni 3 qiymatiga, ikkinchisi uchun
esa - 1 qiymatiga o'rnataylik. Demak, ochko'zlik
jami 4 ga teng. Unda bitta ochko'zlik birligi
100px / 4 = 25px
Birinchi elementga 75px qo'shiladi,
va u 275px bo'ladi, ikkinchisiga esa -
25px qo'shiladi, u 125px bo'ladi:
<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;
}
:
Amaliy vazifalar
Quyidagi barcha vazifalarda sizga
kenglik va flex-grow ga ega bo'lgan fleks-elementlar bilan
biron bir kod taqdim etiladi.
Taqdim etilgan kod asosida har bir element qanday o'lchamlarga ega bo'lishini hisoblang.
Keyin kodni ishga tushiring va elementlarning haqiqiy kengliklarini o'lchab, hisoblanganingizni tekshiring.
<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;
}
