CSS-de fleks bloklaryň ýygysmagyny düzenlemek
Adaty ýagdaýda ähli elementlerden elementleriň giňligine proporsional bölekler aýrylyp alnyňýar.
Emma käbir elementlerden uly ýa-da kiçi bölekler aýrylyp alnyp biliner. Bunuň üçin ýörite
flex-shrink aýratynlygy bar.
Bu aýratynlyk elementden aýrylyp alnyjak bölegi hasaplamakda ýokarda görkezilen formula boýunça elementiň
giňligi köpeldilýän käbir agramdyr. Mysal üçin, elementiň giňligi 200px we onuň
flex-shrink-y 3 bolsa, onda elementiň agramlandyrylan
(ýagny agram bilen köpeldilen) giňligi şuňa deň bolar:
200px * 3 = 600px
flex-shrink-i hasaba alýan formula aşakdaky görnüşde bolar: ter. boş giňlik
* (agramlandyrylan element giňligi / ähli agramlandyrylan elementleriň giňlikleriniň jemi).
Geliň mysal bilen göreliň. Bizde 4 element bolsun. Birinji elementiň giňligi 400px,
flex-shrink-i bolsa 2 bolsun, galan elementleriň giňligi
- 200px, we olaryň flex-shrink-i 1 bolsun. Ene-atanyň giňligi 900px bolsun.
Elementleriň jemi giňligi:
400px + 3 * 200px = 1000px
Teris boş giňlik şuna deň bolar:
1000px - 900px = 100px
Elementleriň jemi agramlandyrylan giňligi:
400px * 2 + 200px * 1 + 200px * 1 + 200px * 1 = 1400px
Birinji element üçin agramlandyrylan giňlik:
400px * 2 = 800px
Birinji elementden aşakdaky bölek aýrylyp alnar:
100px * (800px / 1400px) = 100px * 0.57 = 57.14px
Elementiň giňligi şuna deň bolar:
400px - 57.14px = 342.86px ~ 343px
Galan elementleriň her biriniň agramlandyrylan giňligi şuna deňdir:
200px * 1 = 200px
Her elementden aşakdaky bölek aýrylyp alnar:
100px * (200px / 1400px) = 100px * 0.1428 = 14.28px
Elementleriň giňligi şuna deň bolar:
200px - 14.28px = 185.72px ~ 186px
Görkezilen bloklary amala aşyryň we ölçemek bilen elementleriň giňliginiň hakykatdanam biz hasaplanysy ýaly deňdigini barlap görüň.
Bloklaryň giňligini hasaplaň, soňra bolsa hasaplamalary ölçemek bilen 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: 200px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 100px;
flex-shrink: 2;
}
.elem2 {
width: 100px;
flex-shrink: 1;
}
.elem3 {
width: 100px;
flex-shrink: 1;
}
Bloklaryň giňligini hasaplaň, soňra bolsa hasaplamalary ölçemek bilen 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: 200px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 100px;
flex-shrink: 3;
}
.elem2 {
width: 100px;
flex-shrink: 2;
}
.elem3 {
width: 100px;
flex-shrink: 1;
}
Bloklaryň giňligini hasaplaň, soňra bolsa hasaplamalary ölçemek bilen barlaň:
<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: 500px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 300px;
flex-shrink: 3;
}
.elem2 {
width: 200px;
flex-shrink: 2;
}
.elem3 {
width: 200px;
flex-shrink: 1;
}
.elem4 {
width: 200px;
flex-shrink: 1;
}