Verskillende breedte elemente en saamdrukbaarheid van fleksblokke in CSS

Laat ons nou aanneem ons elemente het verskillende breedtes. In hierdie geval sal die afgesnyde stuk proporsioneel wees tot die breedte van daardie element en bereken word volgens die volgende formule: neg. vrye spasie * (elementbreedte / som van alle elementbreedtes).

Laat ons aanneem ons het 4 elemente. Laat die breedte van die eerste element gelyk wees aan 400px, die breedte van die res van die elemente - 200px, en die breedte van die ouer 900px.

Die totale breedte van die elemente is gelyk aan:

400px + 3 * 200px = 1000px

Dan sal die negatiewe vrye spasie gelyk wees aan:

1000px - 900px = 100px

Kom ons vind hoeveel van die eerste element afgesny sal word:

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

Dit beteken sy breedte sal gelyk wees aan:

400px - 40px = 360px

Kom ons vind hoeveel van elkeen van die ander elemente afgesny sal word:

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

Dit beteken die breedte van hierdie elemente sal gelyk wees aan:

200px - 20px = 180px

Implementeer die beskryfde blokke en gaan na met meting, dat die breedte van die elemente inderdaad gelyk is aan die een wat ons bereken het.

Bereken die breedte van die blokke, en toets dan die berekeninge met meting:

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