Sifa ya flex-grow

Sifa flex-grow inabainisha, kwa kiasi gani kizuizi cha flex pekee kinaweza kuwa kikubwa kuliko vipengele vya jirani, ikiwa ni muhimu.

Kwa mfano, ikiwa vizuizi vyote vya flex ndani ya chombo cha flex vina flex-grow:1, basi zitakuwa za ukubwa sawa. Ikiwa moja yao ina flex-grow:2, basi itakuwa 2 mara kubwa kuliko zote nyingine.

Ikiwa upana wa jumla wa vipengele ni mdogo kuliko upana wa mzazi, kwa hivyo upande wa kulia kuna nafasi tupu. Ikiwa unataka, nafasi hii tupu inaweza kugawanywa kwa uwiano kati ya vipengele vyetu. Hii inafanywa kwa kutumia sifa flex-grow, iliyowekwa kwa vipengele vya flex. Thamani ya hii sifa ni nambari isiyo na kipimo.

Inatumika kwa: kizuizi maalum cha flex.

Sifa hii inakuja kama sehemu ya sifa ya kifupi flex.

Kiendesi

kichagua {
	flex-grow: nambari chanya;
}

Thamani chaguomsingi: 0.

Mfano

Kwa sasa tuna vizuizi viwili vya flex na upana wa 100px. Upana wao wa jumla 200px, na upana wa mzazi - 300px. Inatokea kwamba kuna nafasi huru ya 100px.

Ikiwa vipengele havijawekwa flex-grow, basi tutaona tu nafasi hii huru. Ikiwa imewekwa, basi upana halisi wa vipengele utakuwa mkubwa kuliko uliowekwa - kwa uwiano watagawanya nafasi huru kati yao na kuiongeza kwa upana wao.

Kwa mfano, kwa kipengele cha kwanza flex-grow ni sawa na 1, na kwa cha pili - 3. Hebu tuhesabu, sehemu gani ya nafasi huru kipengele kila kitapata.

Kwanza, unahitaji kupata jumla ya idadi ya vitengo flex-grow ya vipengele vyetu vyote. Kwa kipengele cha kwanza ni sawa na 1, na kwa cha pili - 3. Hii inamaanisha kuwa kwa jumla ni sawa na 4.

Sasa tugawanye 100px ya nafasi huru kwa 4 na tupate kuwa 25px hukaa kwa kitengo kimoja cha flex-grow. Itatokea, kwamba kwa kipengele cha kwanza kitaongezwa kitengo kimoja cha flex-grow, yaani 25px, na kwa cha pili - vitengo vitatu, yaani 75px.

Upana wa kipengele cha kwanza utakuwa 125px, na wa pili - 175px:

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

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

Mfano

Hebu sasa upana wa mzazi uwe 400px, upana wa kipengele cha kwanza 200px, na upana wa kipengele cha pili - 100px. Itatokea, kwamba nafasi huru tena ni sawa na 100px.

Wacha tuweke kila kipengele flex-grow, sawa na 1. Kwa jumla itakuwa 2, yaani 100px ya nafasi huru inahitaji kugawanywa kwa 2. Itatokea kwamba 50px hukaa kwa kitengo kimoja cha choyo.

Kwa kuwa vipengele vyote vina thamani sawa ya flex-grow, basi kwa vipengele vyote vitaongezwa thamani sawa ya 50px. Hii inamaanisha, kwamba kipengele cha kwanza kitakuwa 250px, na na cha pili kitakuwa 150px:

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

.parent	{
	display: flex;
	width: 400px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 200px;
	flex-grow: 1;
}
.elem2 {
	width: 100px;
	flex-grow: 1;
}

Mfano

Hebu tena upana wa mzazi uwe 400px, upana wa kipengele cha kwanza 200px, na upana wa kipengele cha pili - 100px.

Hebu sasa tuweke kipengele cha kwanza flex-grow kwa thamani 3, na cha pili - kwa thamani 1. Itatokea kwamba choyo kwa jumla ni sawa na 4. Basi kitengo kimoja cha choyo ni sawa na 100px / 4 = 25px.

Kwa kipengele cha kwanza kitaongezwa 75px, na itakuwa 275px, na kwa cha pili - 25px, itakuwa 125px:

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

.parent	{
	display: flex;
	width: 400px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 200px;
	flex-grow: 3;
}
.elem2 {
	width: 100px;
	flex-grow: 1;
}

Angalia pia

sifa flex-direction,
ambayo inaweka mwelekeo wa shoka za vizuizi vya flex
sifa justify-content,
ambayo inaweka mpangilio kwenye mhimili mkuu
sifa align-items,
ambayo inaweka mpangilio kwenye mhimili wa pili
sifa flex-wrap,
ambayo inaweka mistari mingi ya vizuizi vya flex
sifa flex-flow,
kifupi cha flex-direction na flex-wrap
sifa order,
ambayo inaweka mpangilio wa vizuizi vya flex
sifa align-self,
ambayo inaweka mpangilio wa kizuizi kimoja
sifa flex-basis,
ambayo inaweka ukubwa wa kizuizi maalum cha flex
sifa flex-shrink,
ambayo inaweka ukandamizaji wa vizuizi vya flex
sifa flex,
kifupi cha flex-grow, flex-shrink na flex-basis