Sifa ya flex-basis

Sifa flex-basis inaweka ukubwa wa kizuizi maalum cha flex kabla ya kutumia sifa zingine za flex kwake. Kwa ujumla, sifa inaweka ukubwa wa kipengele kwenye mhimili kuu. Hii inamaanisha kuwa ikiwa mhimili kuu unalala kwa usawa - sifa hii itaweka upana wa vipengele, na ikiwa unalala wima - basi urefu.

Inatumika kwa kizuizi maalum cha flex.

Sifa hii ni sehemu muhimu ya sifa ya kifupi flex.

Kisarufi

kichagua {
	flex-basis: vitengo vyovyote vya CSS (na asilimia) | auto;
}

Thamani chaguomsingi: auto.

Mfano

Wacha tuchukue mhimili kuu uliolala kwa usawa, na flex-basis iwe na 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 ulala usawa */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px; /* ukubwa wa kipengele */
	border: 1px solid green;
}

Mfano

Wacha 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 ulala wima */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

Angalia pia

sifa flex-direction,
inayoweka mwelekeo wa mihimili ya vizuizi vya flex
sifa justify-content,
inayoweka mpangilio kwenye mhimili kuu
sifa align-items,
inayoweka mpangilio kwenye mhimili wa pili
sifa flex-wrap,
inayoweka uwezo wa kuvunja mistari ya vizuizi vya flex
sifa flex-flow,
kiufupi cha flex-direction na flex-wrap
sifa order,
inayoweka mpangilio wa vizuizi vya flex
sifa align-self,
inayoweka mpangilio wa kizuizi kimoja
sifa flex-grow,
inayoweka uwezo wa kukuza kwa vizuizi vya flex
sifa flex-shrink,
inayoweka uwezo wa kukunjwa kwa vizuizi vya flex
sifa flex,
kiufupi cha flex-grow, flex-shrink na flex-basis