CSS да флекс блокларни сикишни тартибга солиш

Стандарт бўйича барча элементлардан элементнинг энига нисбатан бўлган катталикдаги кисимлар ажратиб олинади. Аммо, баъзи элементлардан катта ёки кичикрок кисимлар ажратиб олиш имкони мавжуд. Бунинг учун flex-shrink maxsus хусусияти мавжуд.

Бу хусусият маълум бир огирликни ифодалайди, у элементнинг эни ҳисобланаётганда юкорида келтирилган формула бўйича ажратиб олинаётган кисимни кўпайтириш учун ишлатилади. Мисол учун, агар элементнинг эни 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;
}