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