Regulacja kompresji bloków flex w CSS

Domyślnie od wszystkich elementów odcinane są kawałki proporcjonalne do szerokości elementu. Można jednak sprawić, że od niektórych elementów zostaną odcięte większe lub mniejsze kawałki. Służy do tego specjalna właściwość flex-shrink.

Właściwość ta reprezentuje pewną wagę, przez którą zostanie pomnożona szerokość elementu przy obliczaniu odcinanego kawałka według przedstawionego wcześniej wzoru. Na przykład, jeśli szerokość elementu wynosi 200px, a jego flex-shrink wynosi 3, to ważona (czyli pomnożona przez wagę) szerokość elementu wyniesie:

200px * 3 = 600px

Wzór uwzględniający flex-shrink będzie miał następującą postać: ujemna przestrzeń swobodna * (ważona szerokość elementu / suma wszystkich ważonych szerokości elementów).

Spójrzmy na przykład. Załóżmy, że mamy 4 elementy. Niech szerokość pierwszego elementu wynosi 400px, a flex-shrink wynosi 2, szerokość pozostałych elementów - 200px, a ich flex-shrink wynosi 1. Niech szerokość rodzica wynosi 900px.

Sumaryczna szerokość elementów wynosi:

400px + 3 * 200px = 1000px

Ujemna przestrzeń swobodna będzie równa:

1000px - 900px = 100px

Sumaryczna ważona szerokość elementów wynosi:

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

Wažona szerokość pierwszego elementu wynosi:

400px * 2 = 800px

Od pierwszego elementu zostanie odcięty następujący kawałek:

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

Szerokość elementu będzie równa:

400px - 57.14px = 342.86px ~ 343px

Wažona szerokość każdego z pozostałych elementów wynosi:

200px * 1 = 200px

Od każdego elementu zostanie odcięty następujący kawałek:

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

Szerokość elementu będzie równa:

200px - 14.2px = 185.8px ~ 186px

Zaimplementuj opisane bloki i sprawdź pomiarem, czy szerokość elementów będzie rzeczywiście równa obliczonej przez nas.

Oblicz szerokość bloków, a następnie sprawdź obliczenia pomiarem:

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

Oblicz szerokość bloków, a następnie sprawdź obliczenia pomiarem:

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

Oblicz szerokość bloków, a następnie sprawdź obliczenia pomiarem:

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