Gjerësia e ndryshme e elementeve dhe ngjeshshmëria e blloqeve fleks në CSS

Tani le të kenë elementet tona gjerësi të ndryshme. Në këtë rast, pjesa e prerë do të jetë proporcionale me gjerësinë e këtij elementi dhe do të llogaritet sipas formulës së mëposhtme: hapësira negative e lirë * (gjerësia e elementit / shuma e të gjitha gjerësive të elementeve).

Le të kemi 4 elemente. Le të jetë gjerësia e elementit të parë 400px, gjerësia e elementeve të tjerë - 200px, dhe gjerësia e prindit 900px.

Gjerësia totale e elementeve është:

400px + 3 * 200px = 1000px

Atëherë hapësira negative e lirë do të jetë e barabartë me:

1000px - 900px = 100px

Le të gjejmë sa do të pritet nga elementi i parë:

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

Kjo do të thotë se gjerësia e tij do të jetë:

400px - 40px = 360px

Le të gjejmë sa do të pritet nga secili prej elementëve të tjerë:

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

Kjo do të thotë se gjerësia e këtyre elementeve do të jetë:

200px - 20px = 180px

Implementoni blloqet e përshkruara dhe kontrolloni me matje, që gjerësia e elementeve do të jetë me të vërtetë e barabartë me atë që kemi llogaritur.

Llogaritni gjerësinë e blloqeve, dhe pastaj kontrolloni llogaritjet me matje:

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