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:
html<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
</div>css.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:
html<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
</div>css.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:
html<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
</div>css.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 ga teng.
Birinchi elementga 75px qo'shiladi,
va u 275px bo'ladi, ikkinchisiga esa -
25px qo'shiladi, u 125px bo'ladi:
html<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
</div>css.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.
html<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem3">3</div>
</div>css.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;
}
html<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem3">3</div>
</div>css.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;
}
html<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem3">3</div>
</div>css.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;
}
html<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>css.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;
}