Фактор на компресија на флекс блоковите во CSS

Во претходната лекција откривме дека, кога на флекс елементите им недостасува простор, тие почнуваат да се компресираат. Тоа, колку вкупната ширина е поголема од ширината на родителот се нарекува негативен слободен простор.

Технички, компресијата значи дека од ширината на секој елемент се одзема парче од ширината така што сите елементи да се вклопат во својот родител.

Ајде да направиме некоја пресметка. Да речеме, на пример, дека имаме 4 елементи со ширина од 200px. Нека притоа ширината на родителот изнесува 700px. Излегува дека вкупната ширина на елементите е:

Ова е ширина за 100px поголема од ширината на родителот. Ајде да пресметаме, колку од секој елемент треба да се одземе, за да се вклопат елементите во својот родител:

Тоа е, ширината на елементите ќе биде:

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;
}
.elem2 {
  width: 100px;
}
.elem3 {
  width: 100px;
}