Forskellig bredde på elementer og komprimering af flex-blokke i CSS

Lad os nu antage, at vores elementer har forskellig bredde. I dette tilfælde vil den afklippede del være proportional med bredden af dette element og vil blive beregnet ved hjælp af følgende formel: negativt frit rum * (elementets bredde / summen af alle elementers bredder).

Antag, at vi har 4 elementer. Lad bredden af det første element være 400px, bredden af de resterende elementer - 200px, og bredden af forælderen 900px.

Den samlede bredde af elementerne er:

400px + 3 * 200px = 1000px

Så vil det negative frie rum være lig med:

1000px - 900px = 100px

Lad os finde ud af, hvor meget der fjernes fra det første element:

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

Det vil sige, at dens bredde vil være:

400px - 40px = 360px

Lad os finde ud af, hvor meget der fjernes fra hvert af de andre elementer:

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

Det vil sige, at bredden af disse elementer vil være:

200px - 20px = 180px

Implementer de beskrevne blokke og kontroller med måling, at bredden af elementerne faktisk er lig med den, vi har beregnet.

Beregn bredden af blokkene, og kontroller derefter beregningerne med en måling:

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