Sifa flex

Sifa flex ni ufupisho wa flex-basis, flex-shrink na flex-grow.

Inatumika kwa: kizuizi fulani cha flex.

Mpangilio wa thamani hauna maana. Vigezo vya pili na vya tatu (flex-shrink, flex-basis) si lazima.

Thamani

Tazama sifa zinazohusiana.

Thamani chaguomsingi: 0 1 auto.

Mfano

Tuchukulie tuna vitu 3. Upana wa kila kimoja kati yao ni 200px na kwa jumla ni 600px, ambayo ni zaidi ya upana wa chombo kizazi, ambao ni 300px. Wacha tuweke upana wa kitu cha kwanza kuwa 200px, kwa kitu cha pili - 300px, kwa kitu cha tatu - 100px. Kwa vitu vyote thamani ya flex-basis iwe sawa na 1, na flex-shrink - 1, 2, 3 kulingana na nambari ya mlolongo wa kitu:

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

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

Angalia pia

sifa flex-direction,
ambayo huweka mwelekeo wa shoka za vizuizi vya flex
sifa justify-content,
ambayo huweka mpangilio kwenye mhimili mkuu
sifa align-items,
ambayo huweka mpangilio kwenye mhimili wa pembeni
sifa flex-wrap,
ambayo huweka mistari mingi ya vizuizi vya flex
sifa flex-flow,
ufupisho wa flex-direction na flex-wrap
sifa order,
ambayo huweka mpangilio wa vizuizi vya flex
sifa align-self,
ambayo huweka mpangilio wa kizuizi kimoja
sifa flex-basis,
ambayo huweka ukubwa wa kizuizi fulani cha flex
sifa flex-grow,
ambayo huweka uchochoro wa vizuizi vya flex
sifa flex-shrink,
ambayo huweka mkandamizo wa vizuizi vya flex