Ukubwa kwa Kipengele cha Flex Kulingana na Mhimili Mkuu

Sifa width na height zinaweka upana na urefu wa kipengele cha flex bila kujali mwelekeo wa shoka. Hiyo ni, ikiwa mhimili uko mlalo, basi width itaweka upana, lakini ikiwa mhimili uko wima, basi width bado itaweka upana. Wakati mwingine tabia kama hii haiwesi.

Katika mfano wa flex kuna sifa maalum flex-basis, ambayo inaweka ukubwa wa kipengele kulingana na mhimili mkuu. Hii inamaanisha kuwa ikiwa mhimili mkuu uko mlalo - sifa hii itaweka upana wa vipengele, na ikiwa uko wima - basi urefu. Sifa hii inahitaji kuwekwa kwa vipengele vya flex wenyewe, na si kizazi chao. Hebu tuangalie kwa mifano.

Hebu sasa mhimili mkuu uko mlalo, na flex-basis ina thamani 50px. Katika kesi hii upana wa vipengele utakuwa 50px:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
</div>

.parent {
	display: flex;
	flex-direction: row; /* mhimili uko mlalo */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;   /* ukubwa wa kipengele */
	border: 1px solid green;
}

Hebu sasa tubadilishe mwelekeo wa mhimili, bila kubadilisha thamani ya sifa flex-basis. Katika kesi hii urefu wa vipengele utakuwa 50px:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
</div>

.parent {
	display: flex;
	flex-direction: column; /* mhimili uko wima */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

Tengeneza 5 vizuizi vya flex. Waweke upana wao kulingana na mhimili mkuu kuwa 100px. Angalia tabia ya vizuizi kulingana na shoka tofauti.

Ikiwa mhimili uko mlalo na kizuizi kimepewa sifa flex-basis na wakati huo huo sifa width, basi flex-basis ndiyo itakuwa na kipaumbele. Jaribu hili.

Ikiwa mhimili uko wima na kizuizi kimepewa sifa flex-basis na wakati huo huo sifa height, basi flex-basis ndiyo itakuwa na kipaumbele. Jaribu hili.