Унсури гуногун паҳноӣ ва фишурдашавии блокҳои флекс дар 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;
}