Регулисање сабијања флекс блокова у CSS

Подразумевано, од свих елемената се одвајају делови, пропорционално ширини елемента. Међутим, могуће је учинити да се од неких елемената одвајају већи или мањи делови. За то постоји специјално својство flex-shrink.

Ово својство представља одређени коефицијент (тежину), са којим ће се помножити ширина елемента при израчунавању дела који се одваја преко већ наведене формуле. На пример, ако је ширина елемента 200px, а његов flex-shrink је 3, онда је пондерисана (тј. помножена са тежином) ширина елемента једнака:

200px * 3 = 600px

Формула узимајући у обзир flex-shrink ће имати следећи облик: нег. слоб. простор * (пондерисана ширина елемента / збир свих пондерис. ширина елемената).

Хајде да погледамо на примеру. Нека имамо 4 елемента. Нека је ширина првог елемента 400px, а његов flex-shrink је 2, ширина осталих елемената је 200px, а њихов flex-shrink је 1. Нека је ширина родитеља 900px.

Укупна ширина елемената је:

400px + 3 * 200px = 1000px

Негативан слободан простор ће бити:

1000px - 900px = 100px

Укупна пондерисана ширина елемената је:

400px * 2 + 200px * 1 + 200px * 1 + 200px * 1 = 1400px

Пондерисана ширина првог елемента је:

400px * 2 = 800px

Од првог елемента ће се одвојити следећи део:

100px * (800px / 1400px) = 100px * 0.57 = 57.14px

Ширина елемента ће бити:

400px - 57.14px = 342.86px ~ 343px

Пондерисана ширина сваког од осталих елемената је:

200px * 1 = 200px

Од сваког елемента ће се одвојити следећи део:

100px * (200px / 1400px) = 100px * 0.142 = 14.2px

Ширина елемента ће бити:

200px - 14.2px = 185.8px ~ 186px

Имплементирајте описане блокове и проверите мерењем, да ли је ширина елемената заиста једнака оној коју смо израчунали.

Израчунајте ширину блокова, а затим проверите прорачуне мерењем:

<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: 200px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 100px;
	flex-shrink: 2;
}
.elem2 {
	width: 100px;
	flex-shrink: 1;
}
.elem3 {
	width: 100px;
	flex-shrink: 1;
}

Израчунајте ширину блокова, а затим проверите прорачуне мерењем:

<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: 200px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 100px;
	flex-shrink: 3;
}
.elem2 {
	width: 100px;
	flex-shrink: 2;
}
.elem3 {
	width: 100px;
	flex-shrink: 1;
}

Израчунајте ширину блокова, а затим проверите прорачуне мерењем:

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

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