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

Задание 1

Görkezilen bloklary amala aşyryň we ölçemek bilen elementleriň giňliginiň hakykatdanam biz hasaplanysy ýaly deňdigini barlap görüň.

Задание 2

Bloklaryň giňligini hasaplaň, soňra bolsa hasaplamalary ölçemek bilen barlaň:

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: 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;
}

Задание 3

Bloklaryň giňligini hasaplaň, soňra bolsa hasaplamalary ölçemek bilen barlaň:

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: 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;
}

Задание 4

Bloklaryň giňligini hasaplaň, soňra bolsa hasaplamalary ölçemek bilen barlaň:

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: 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;
}