Udhibiti wa Mkandanisho wa Flex Blocks katika CSS

Kwa default, vipande vidogo vinakataliwa kutoka kwa vipengele vyote, sawasawa na upana wa kipengele. Hata hivyo, inawezekana kufanya baadhi ya vipengele vikatwe vipande vidogo au vikubwa zaidi. Kwa hili kuna sifa maalum flex-shrink.

Sifa hii inawakilisha uzito fulani, ambao utazidishwa na upana wa kipengele wakati wa kuhesabu kipande kilichokatwa kulingana na fomula iliyotajwa hapo juu. Kwa mfano, ikiwa upana wa kipengele ni 200px, na flex-shrink yake ni 3, basi upana uliopimwa (yaani, uliozidishwa kwa uzito) wa kipengele utakuwa:

200px * 3 = 600px

Fomula kwa kuzingatia flex-shrink itakuwa na muundo ufuatao: nafasi hasi ya ziada * (upana uliopimwa wa kipengele / jumla ya upana uliopimwa wa vipengele vyote).

Tuangalie kwa mfano. Hebu tuwe na 4 vipengele. Upana wa kipengele cha kwanza ni 400px, na flex-shrink yake ni 2, upana wa vipengele vingine - 200px, na flex-shrink yao ni 1. Hebu upana wa mzazi uwe 900px.

Upana wa jumla wa vipengele ni:

400px + 3 * 200px = 1000px

Nafasi hasi ya ziada itakuwa:

1000px - 900px = 100px

Upana wa jumla uliopimwa wa vipengele ni:

400px * 2 + 200px * 1 + 200px * 1 + 200px * 1 = 1400px

Upana uliopimwa wa kipengele cha kwanza ni:

400px * 2 = 800px

Kipande kifuatacho kitakatwa kutoka kwa kipengele cha kwanza:

100px * (800px / 1400px) = 100px * 0.57 = 57.14px

Upana wa kipengele utakuwa:

400px - 57.14px = 342.86px ~ 343px

Upana uliopimwa wa kila kipengele kingine ni:

200px * 1 = 200px

Kipande kifuatacho kitakatwa kutoka kwa kila kipengele:

100px * (200px / 1400px) = 100px * 0.142 = 14.2px

Upana wa kipengele utakuwa:

200px - 14.2px = 185.8px ~ 186px

Tekeleza vizuizi vilivyoelezewa na uangalie kwa kupima, kwamba upana wa vipengele utakuwa kweli sawa na ule tuliohesabu.

Kokotoa upana wa vizuizi, kisha ukagua 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: 200px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 100px;
	flex-shrink: 2;
}
.elem2 {
	width: 100px;
	flex-shrink: 1;
}
.elem3 {
	width: 100px;
	flex-shrink: 1;
}

Kokotoa upana wa vizuizi, kisha ukagua 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: 200px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 100px;
	flex-shrink: 3;
}
.elem2 {
	width: 100px;
	flex-shrink: 2;
}
.elem3 {
	width: 100px;
	flex-shrink: 1;
}

Kokotoa upana wa vizuizi, kisha ukagua 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 class="child elem4">4</div>
</div>

.parent {
	display: flex;
	width: 500px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 300px;
	flex-shrink: 3;
}
.elem2 {
	width: 200px;
	flex-shrink: 2;
}
.elem3 {
	width: 200px;
	flex-shrink: 1;
}
.elem4 {
	width: 200px;
	flex-shrink: 1;
}