CSS'теги флекс блокторунун ар түрдүү туурасы жана ыкчамдыгы

Эми биздин элементтерибиз ар кандай туурага ээ болсун. Бул учурда бөлүнүп алынуучу бөлүк ошол элементтин туурасына пропорционалдык болот жана төмөнкү формула боюнча эсептелет: терс бош мейкиндик * (элементтин туурасы / бардык элементтердин туураларынын суммасы).

Бизде 4 элемент бар болсун. Биринчи элементтин туурасы 400px болсун, калган элементтердин туурасы - 200px, ал эми ата-энесинин туурасы 900px болсун.

Элементтердин жалпы туурасы:

400px + 3 * 200px = 1000px

Анда терс бош мейкиндик төмөнкүчө болот:

1000px - 900px = 100px

Биринчи элементтен канча бөлүнүп алынарын табалы:

100px * (400px / 1000px) = 40px

Башкача айтканда, анын туурасы төмөнкүчө болот:

400px - 40px = 360px

Калган ар бир элементтен канча бөлүнүп алынарын табалы:

100px * (200px / 1000px) = 20px

Башкача айтканда, бул элементтердин туурасы төмөнкүчө болот:

200px - 20px = 180px

Сүрөттөлгөн блокторду ишке ашырыңыз жана өлчөө менен текшериңиз, элементтердин туурасы чынында эле биз эсептегендей болуп чыгабы.

Блоктордун туурасын эсептеп чыгыңыз, андан кийин эсептөөлөрүңүздү өлчөө менен текшериңиз:

<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: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 300px;
}
.elem2 {
	width: 100px;
}
.elem3 {
	width: 100px;
}