CSS-da fleks bloklarning siqilish omili

Oldingi darsda biz bilib oldikki, qachonki fleks elementlar uchun joy yetarli bo'lmaganda, ular siqila boshlaydi. Jami kenglikning ota element kengligidan katta bo'lgan miqdor manfiy erkin joy deb ataladi.

Texnik jihatdan siqilish deganda, har bir elementning kengligidan bir bo'lak ajratib olinishi, shundayki barcha elementlar o'z ota-elementiga sig'adigan bo'lishi, tushuniladi.

Keling, bir hisob-kitobni amalga oshiramiz. Faraz qilaylik, misol uchun, bizda 4 ta elementi bor, ularning kengligi 200px. Shu bilan birga, ota elementning kengligi 700px ga teng. Demak, elementlarning jami kengligi teng:

200px * 4 = 800px

Bu kenglik ota element kengligidan 100px ga ko'p. Keling, har bir elementdan qancha miqdorni ajratib olish kerakligini hisoblab chiqaylik, shunda elementlar o'z ota-elementiga sig'adigan bo'lsin:

100px / 4 = 25px

Ya'ni elementlarning kengligi quyidagicha bo'ladi:

200px - 25px = 175px

Tasvirlangan bloklarni amalga oshiring va o'lchash orqali tekshiring, elementlarning kengligi haqiqatan ham biz hisoblaganiga teng ekanligini.

Bloklarning kengligini hisoblang, so'ngra hisoblaringizni o'lchash orqali tekshiring:

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