Urojo wa Vipengele vya Flex katika CSS

Hebu sasa tuwe na vizuizi viwili vya flex, vilivyopangwa kwa mstari. Vizuizi hivi vina upana uliowekwa wa 100px, na mzazi wao - 300px:

:

Kama unavyoona, jumla ya upana wa vipengele vyetu ni chini ya upana wa mzazi, kwa hivyo upande wa kulia kuna nafasi tupu.

Kwa hiari, nafasi hii tupu inaweza kugawanywa sawasawa 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.

Hebu tuangalie kwa vitendo, jinsi sifa hii inavyofanya kazi.

Mfano

Sasa tuna vizuizi viwili vya flex na upana wa 100px. Jumla ya upana wa vipengele 200px, na upana wa mzazi - 300px. Inatokea kwamba kuna nafasi iliyobaki ya 100px.

Kama kipengele hakijapewa flex-grow, basi tutaona tu nafasi hii iliyobaki. Lakini ikiwa imewekwa, basi upana halisi wa vipengele utakuwa mkubwa zaidi kuliko uliowekwa - watawa kugawanya nafasi iliyobaki kati yao na kuiongeza kwa upana wao.

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

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

Sasa tugawanye 100px ya nafasi iliyobaki kwa 4 na tupate kwamba 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 cha pili - 175px:

:

Mfano

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

Hebu kila kipengele kiweke flex-grow, sawa na 1. Kwa jumla itakuwa 2, yaani 100px ya nafasi iliyobaki inahitaji kugawanywa kwa 2. Itatokea kwamba 50px hukaa kwa kitengo kimoja cha urojo.

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:

:

Mfano

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

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

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

:

Kazi za Vitendo

Katika kazi zote hapa chini utapewa baadhi ya msimbo na vipengele vya flex, vilivyo na upana na flex-grow. Kulingana na msimbo uliowasilishwa hesabu, vipimo gani kitakuwa na kila kipengele. Kisha anzisha msimbo na ukagua mahesabu yako, kwa kupima upana halisi wa vipengele.