CSS-də Fleks Blokların Sıxılmasının Tənzimlənməsi

Standart olaraq, bütün elementlərdən eninə mütənasib olaraq kiçik hissələr kəsilir. Lakin, bəzi elementlərdən daha böyük və ya daha kiçik hissələrin kəsiləcəyi təmin edilə bilər. Bunun üçün xüsusi flex-shrink xassəsi mövcuddur.

Bu xassə, artıq yuxarıda göstərilən düstura əsasən kəsiləcək hissənin hesablanması zamanı elementin eni ilə vurulacaq müəyyən bir çəkidir. Məsələn, əgər elementin eni 200px, onun flex-shrink dəyəri isə 3-dursa, onda elementin çəkili (yəni çəkiyə vurulmuş) eni belə olacaq:

200px * 3 = 600px

flex-shrink nəzərə alınmaqla düstur aşağıdakı formanı alacaq: mənfi sərbəst fəza * (elementin çəkili eni / bütün elementlərin çəkili enlərinin cəmi).

Gəlin bir nümunəyə baxaq. Tutaq ki, bizim 4 elementimiz var. Birinci elementin eni 400px, flex-shrink dəyəri 2, qalan elementlərin eni isə 200px və onların flex-shrink dəyəri 1 olsun. Valideynin eni isə 900px olsun.

Elementlərin ümumi eni bərabərdir:

400px + 3 * 200px = 1000px

Mənfi sərbəst fəza bərabər olacaq:

1000px - 900px = 100px

Elementlərin ümumi çəkili eni bərabərdir:

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

Birinci elementin çəkili eni bərabərdir:

400px * 2 = 800px

Birinci elementdən aşağıdakı hissə kəsiləcək:

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

Elementin eni bərabər olacaq:

400px - 57.14px = 342.86px ~ 343px

Qalan elementlərin hər birinin çəkili eni bərabərdir:

200px * 1 = 200px

Hər bir elementdən aşağıdakı hissə kəsiləcək:

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

Elementin eni bərabər olacaq:

200px - 14.2px = 185.8px ~ 186px

Təsvir olunan blokları həyata keçirin və ölçmə yolu ilə yoxlayın ki, elementlərin eni həqiqətən də bizim hesabladığımız kimi olur.

Blokların enini hesablayın, sonra hesablamaları ölçmə yolu ilə yoxlayın:

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

Blokların enini hesablayın, sonra hesablamaları ölçmə yolu ilə yoxlayın:

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

Blokların enini hesablayın, sonra hesablamaları ölçmə yolu ilə yoxlayın:

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