Kipimo cha Mwonekano wa Flex Blocks katika CSS

Katika somo lililopita tuligundua kuwa, wakati vipengele vya flex hapana nafasi ya kutosha, huanza kujikandamiza. Kiasi ambacho jumla ya upana unazidi upana wa kiumzazi kinaitwa nafasi hasi ya bure.

Kitaalamu, kujikandamiza kunamaanisha kuwa sehemu ya upana huondolewa kutoka kwa kila kipengele ili vipengele vyote viweze kutoshea ndani ya kiumzazi chake.

Wacha tufanye hesabu fulani. Tuseme, kwa mfano, tuna vipengele 4 vilivyo na upana wa 200px. Tuseme pia upana wa kiumzazi ni 700px. Inatokea kwamba jumla ya upana wa vipengele ni:

200px * 4 = 800px

Huu ni upana unaozidi upana wa kiumzazi kwa 100px. Wacha tuhesabu, kiasi gani kinahitaji kuondolewa kutoka kwa kila kipengele, ili vipengele viweze kutoshea ndani ya kiumzazi chake:

100px / 4 = 25px

Hii inamaanisha upana wa vipengele utakuwa:

200px - 25px = 175px

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

Kokotoa upana wa vitalu, kisha uhakikishe hesabu zako 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;
}
.elem2 {
	width: 100px;
}
.elem3 {
	width: 100px;
}