CSS-те флекс блоктердің сығылу коэффициенті

Алдыңғы сабақта біз флекс элементтерге орын жетпей бастаған кезде, олардың сығыла бастайтынын анықтадық. Барлық элементтердің жалпы ені әкесінің енінен қаншалықты үлкен екендігі теріс бос орын деп аталады.

Техникалық тұрғыдан сығылу әр элементтің енінен кесінді алынып, барлық элементтер өз әкесіне сыйып кетуі үшін еннің азаюын білдіреді.

Енді біраз есептеу жүргізейік. Мысалы, бізде әрқайсысы 200px ендес 4 элемент бар делік. Ал әкесінің ені 700px болсын. Элементтердің жалпы ені мынаған тең болады:

200px * 4 = 800px

Бұл әкесінің енінен 100px үлкен. Элементтер әкесіне сыйып кету үшін әр элементтен қанша кесінді алу керектігін есептейік:

100px / 4 = 25px

Яғни элементтердің ені мынадай болады:

200px - 25px = 175px

Сипатталған блоктарды жасаңыз және элементтердің ені шынымен біз есептегендей болатынын өлшеу арқылы тексеріңіз.

Блоктардың енін есептеңіз, содан кейін есептеулерді өлшеу арқылы тексеріңіз:

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