Upana Tofauti ya Vipengele na Ukandamishaji wa Flekta Blocku katika CSS

Sasa hebu vipengele vyetu viwe na upana tofauti. Katika hali hii, kipande kitakachokatwa kitakuwa sawia na upana wa kipengele hicho na kitahesabiwa kulingana na fomula ifuatayo: nafasi hasi ya bure * (upana wa kipengele / jumla ya upana wa vipengele vyote).

Hebu tuwe na vipengele 4. Hebu upana wa kipengele cha kwanza uwe 400px, upana wa vipengele vilivyobaki - 200px, na upana wa mzazi 900px.

Jumla ya upana wa vipengele ni:

400px + 3 * 200px = 1000px

Basi nafasi hasi ya bure itakuwa:

1000px - 900px = 100px

Tutafute kiasi kitakachokatwa kutoka kipengele cha kwanza:

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

Hii inamaanisha upana wake utakuwa:

400px - 40px = 360px

Tutafute kiasi kitakachokatwa kutoka kwa kila kipengele kilichobaki:

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

Hii inamaanisha upana wa vipengele hivi utakuwa:

200px - 20px = 180px

Tekeleza blocku zilizoelezewa na uhakiki kwa kupima, kwamba upana wa vipengele utakuwa kweli sawa na ule tuliohesabu.

Kokotoa upana wa blocku, kisha uhakiki mahesabu kwa kupima:

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