CSSтеги Flex блоктордун кысылуусун жөнгө салуу

Демейкиде бардык элементтерден элементтин туурасына пропорционалдуу бөлүктөр ажыратылат. Бирок, кээ бир элементтерден чоң же кичинекей бөлүктөр ажыратылса болот. Бул үчүн атайын касиет бар 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.143 = 14.3px

Элементтин туурасы төмөнкүчө болот:

200px - 14.3px = 185.7px ~ 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;
}