Својство flex-shrink

Својството flex-shrink одредува тоа, колку flex-блокот ќе се намалува релативно во однос на соседните елементи внатре во flex-контејнерот во случај на недостаток на слободен простор.

На пример, ако сите flex-блокови внатре во flex-контејнерот имаат flex-shrink:1, тогаш тие ќе бидат со иста големина. Ако еден од нив има flex-shrink:2, тогаш тој ќе биде 2 пати помал од сите останати.

Се применува на: конкретен flex блок.

Ова својство влегува како составен дел во кратенката на својството flex.

Синтакса

cssселектор {
  flex-shrink: позитивен број;
}

Стандардна вредност: 1.

Пример

Да претпоставиме дека имаме 3 елементи. Ширината на секој од нив изнесува 200px и вкупно е еднаква на 600px, што е поголемо од ширината на родителскиот контејнер, која е еднаква на 350px:

html<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
  <div class="child elem2">3</div>
</div>

css.parent {
  display: flex;
  width: 350px;
  height: 200px;
  border: 1px solid red;
}
.child {
  width: 200px;
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  flex-shrink: 1;
}
.elem2 {
  flex-shrink: 2;
}
.elem3 {
  flex-shrink: 3;
}

Результат:

Ајде да го пресметаме негативниот слободен простор според формулата:

Вкупната пондерирана ширина на елементите земајќи ги предвид вредностите на својството flex-shrink за секој елемент ќе биде еднаква на: