Свойство 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 за всеки елемент ще бъде равна на:

Сега нека определим с колко ще се свие първият елемент:

Вторият елемент:

Третият елемент:

Излиза, че третият елемент, чиято стойност flex-shrink е равна на 3, ще се свие повече от другите елементи.

Вижте също