Регулирање на компресија на флекс блокови во 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;
}