CSS-de fleks elementleriniň peýdakorlygy
Indiki wagtda bizde hatarda duran iki fleks blogy bar diýeli.
Bu bloglara 100px ini genişlik berildi,
ata-enesine bolsa - 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örşüňiz ýaly, elementleriň jemi ini genişligi ata-enäniň ini genişliginden kiçi, şonuň üçin sagda boş meýdan galýar.
Isleg ýüze çyksa, bu boş meýdany
elementleriň arasynda proporsional paýlap bolýar.
Bu flex-grow häsiýeti ýardamy bilen amala aşyrylýar,
ýagny fleks elementlerine berilýän bu häsiýet, ölçege eýe bolmadyk san bilen kesgitlenilýär.
Geliň praktikada bu häsiýetiň nädip işleýändigini göreli.
Mysal
Häzirki wagtda bizde ini genişligi
100px bolan iki fleks blogy bar.
Elementleriň jemi ini genişligi
200px, ata-enäniň ini genişligi bolsa - 300px.
Netijede, 100px boş meýdan galýar.
Eger elementlere flex-grow berilmedik bolsa,
onda biz diňe şu boş meýdany göreris.
Eger berlen bolsa, onda elementleriň hakyky ini genişligi
berlenden uly bolar - olar proporsional boş meýdany
öz aralarynda paýlaşar we öz ini genişliklerine goşarlar.
Mysal üçin, birinji elementde flex-grow
1, ikinji elementde bolsa 3 deň bolsun. Geliň
hasaplap göreli, her bir element näçeräk boş meýdan alar.
Ilki bilen, biz elementleriň ählisiniň
flex-grow birlikleriniň jemi sanyny tapmaly.
Birinji element üçin 1,
ikinji element üçin bolsa 3. Bu jemi 4 deň diýen manyny berýär.
Indi 100px boş meýdany
4 bölüň we her bir
flex-grow birligine 25px düşýändigini alyň. Netijede,
birinji element bir birlik
flex-grow, ýagny 25px alar,
ikinji element üçin bolsa üç birlik,
ýagny 75px alar.
Birinji elementüň ini genişligi 125px,
ikinjisiniňki bolsa 175px bolar:
<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;
}
:
Mysal
Indi ata-enäniň ini genişligi 400px deň bolsun,
birinji elementüň ini genişligi 200px,
ikinji elementüň ini genişligi bolsa - 100px deň bolsun. Netijede,
boş meýdan ýene-de
100px deň bolar.
Geliň her elemente flex-grow bereli,
1 deň bolsun. Jemi 2,
ýagny 100px boş meýdan
2 bölünmeli. Her bir
peýdakorlyk birligine 50px düşer.
Sebäbi ähli elementleriň flex-grow bahasy deň,
şonuň üçin ähli elementlere deň ölçegde
50px goşular. Bu manyny berýär,
birinji element 250px,
ikinji element bolsa 150px bolar:
<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;
}
:
Mysal
Ýene-de ata-enäniň ini genişligi 400px,
birinji elementüň ini genişligi 200px,
ikinji elementüň ini genişligi bolsa - 100px bolsun diýeli.
Indi birinji elemente
flex-grow bahasyny 3, ikinji elemente bolsa
1 deň edeliň. Netijede, peýdakorlyk
jemi 4 deň bolar. Onda bir birlik
peýdakorlyk 100px / 4 = 25px
Birinji elemente 75px goşular,
we ol 275px bolar, ikinji elemente bolsa -
25px goşular, we ol 125px bolar:
<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;
}
:
Amaly meseleler
Aşakdaky ähli meselelerde size ini genişlik we flex-grow
berlen fleks elementleriniň kod görnüşi görkeziler.
Görkezilen koda görä hasaplaň, her bir element
näçe ölçegde boljakdygyny anyklaň. Soňra kody işledip
we hakyky ini genişlikleri ölçäp, hasaplamalaryňyzy barlaň.
<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;
}
