Својство 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