CSS-те флекс блоктердің сығылуын реттеу

Әдепкі бойынша барлық элементтерден элементтің еніне пропорционалды бөліктер алынады. Алайда, кейбір элементтерден үлкен немесе кішірек бөліктер алынуына болады. Ол үшін арнайы қасиет бар flex-shrink.

Бұл қасиет элементтің енінен алынатын бөлікті жоғарыда келтірілген формула бойынша есептеу кезінде элементтің еніне көбейтілетін белгілі бір салмақты білдіреді. Мысалы, егер элементтің ені 200px, ал оның flex-shrink 3-ке тең болса, онда салмақталған (яғни салмаққа көбейтілген) элемент ені мынаған тең болады:

200px * 3 = 600px

flex-shrink-ті ескере отырып формула келесі түрде болады: теріс бос кеңістік * (элементтің салмақталған ені / барлық элементтердің салмақталған ендерінің қосындысы).

Мысалды қарастырайық. Бізде 4 элемент бар делік. Бірінші элементтің ені 400px, ал flex-shrink 2-ге тең, қалған элементтердің ені - 200px, ал олардың flex-shrink 1-ге тең. Ата-ананың ені 900px делік.

Элементтердің жалпы ені:

400px + 3 * 200px = 1000px

Теріс бос кеңістік мынаған тең болады:

1000px - 900px = 100px

Элементтердің жалпы салмақталған ені:

400px * 2 + 200px * 1 + 200px * 1 + 200px * 1 = 1400px

Бірінші элементтің салмақталған ені:

400px * 2 = 800px

Бірінші элементтен мынадай бөлік алынады:

100px * (800px / 1400px) = 100px * 0.57 = 57.14px

Элементтің ені мынаған тең болады:

400px - 57.14px = 342.86px ~ 343px

Қалған әрбір элементтің салмақталған ені мынаған тең:

200px * 1 = 200px

Әрбір элементтен мынадай бөлік алынады:

100px * (200px / 1400px) = 100px * 0.142 = 14.2px

Элементтің ені мынаған тең болады:

200px - 14.2px = 185.8px ~ 186px

Задание 1

Сипатталған блоктарды жасаңыз және элементтердің ені шынымен біз есептегенге тең екенін өлшеу арқылы тексеріңіз.

Задание 2

Блоктардың енін есептеңіз, содан кейін есептеулерді өлшеу арқылы тексеріңіз:

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

Блоктардың енін есептеңіз, содан кейін есептеулерді өлшеу арқылы тексеріңіз:

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

Блоктардың енін есептеңіз, содан кейін есептеулерді өлшеу арқылы тексеріңіз:

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