CSS-də Fleks Blokların Sıxılma Faktoru

Əvvəlki dərsdə müəyyən etdik ki, fleks elementlərə yer çatışmadıqda, onlar sıxılmağa başlayır. Ümumi enin valideynin enindən nə qədər çox olduğuna mənfi sərbəst məkan deyilir.

Texniki cəhətdən sıxılma o deməkdir ki, hər bir elementin enindən elə bir en hissəsi kəsilir ki, bütün elementlər öz valideyninə sığsın.

Gəlin bir hesablama aparaq. Məsələn, tutaq ki, bizim eni 200px olan 4 elementimiz var. Bu zaman valideynin eni 700px olsun. Deməli, elementlərin ümumi eni bərabərdir:

200px * 4 = 800px

Bu en valideynin enindən 100px çoxdur. Gəlin hesablayaq, elementlərin valideyninə sığması üçün hər elementdən nə qədər kəsmək lazımdır:

100px / 4 = 25px

Yəni elementlərin eni belə olacaq:

200px - 25px = 175px

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 olacaq.

Blokların enini hesablayın, sonra isə 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;
}
.elem2 {
	width: 100px;
}
.elem3 {
	width: 100px;
}