Свойство flex-shrink

Свойството flex-shrink определя до каква степен flex-блокът ще се свива спрямо съседните елементи във flex-контейнера в случай на липса на свободно пространство.

Например, ако всички flex-блокове във flex-контейнера имат flex-shrink:1, то те ще бъдат с еднакъв размер. Ако един от тях има flex-shrink:2, то той ще бъде 2 пъти по-малък от всички останали.

Прилага се към: конкретен flex блок.

Това свойство влиза като съставна част в свойството-съкращение flex.

Синтаксис

селектор {
	flex-shrink: положително число;
}

Стойност по подразбиране: 1.

Пример

Нека имаме 3 елемента. Ширината на всеки от тях е 200px и сумарно е равна на 600px, което е по-голямо от ширината на родителския контейнер, която е равна на 350px:

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

.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;
}

Нека изчислим отрицателното свободно пространство по формулата:

600px - 350px = 250px

Сумарната претеглена ширина на елементите със стойностите на свойството flex-shrink за всеки елемент ще бъде равна на:

200px * 1 + 200px * 2 + 200px * 3 = 1200px

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

250px * 1 (flex-shrink) * 200 (width) / 1200 = 41,6px

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

250px * 2 (flex-shrink) * 200 (width) / 1200 = 83,3px

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

250px * 3 (flex-shrink) * 200 (width) / 1200 = 125px

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

Вижте също

свойство flex-direction,
което задава посока на осите на flex блоковете
свойство justify-content,
което задава подравняване по главната ос
свойство align-items,
което задава подравняване по напречната ос
свойство flex-wrap,
което задава многолинейност на flex блоковете
свойство flex-flow,
съкращение за flex-direction и flex-wrap
свойство order,
което задава реда на flex блоковете
свойство align-self,
което задава подравняване на един блок
свойство flex-basis,
което задава размера на конкретен flex блок
свойство flex-grow,
което задава "алчност" на flex блоковете
свойство flex,
съкращение за flex-grow, flex-shrink и flex-basis