Jenereta ya Flexbox
CSS Flexbox ni mfumo wa mpangilio wa pande moja unaotumika kupanga vipengele kwenye safu mlalo au safuwima. Jenereta ya Flexbox inakuwezesha kuunda chombo cha flex (flex container) na vipengele vyake (flex items) kwa kutumia vidhibiti vya macho, kuona mabadiliko hayo yakitokea moja kwa moja kwenye skrini, na kisha kunakili msimbo wa CSS ulioundwa kwa ajili ya mradi wako.
Mpangilio wako unaundwa moja kwa moja kwenye kivinjari chako. Hakuna unachoingiza hapa kinachopakiwa kwenye BroBroGo.
Vidhibiti vya Chombo cha Flex (Flex Container)
Chombo cha flex ndicho kinachofafanua mazingira ya jumla ya mpangilio. Katika sehemu ya Chombo (Container), unaweza kurekebisha sifa zifuatazo ili kudhibiti mtiririko wa vipengele vyako:
- Mwelekeo: Chaguzi ni Safu mlalo (Row), Safu mlalo kinyume, Safuwima (Column), na Safuwima kinyume. Sifa hii inafafanua mhimili mkuu wa chombo. Kubadilisha mwelekeo kutoka row hadi column kunabadilisha mhimili mkuu na mhimili mwingine (cross axis), jambo linaloathiri jinsi sifa za upangaji zinavyofanya kazi.
- Kufunga (Wrap): Chaguzi ni Bila kufunga, Kufunga (Wrap), na Kufunga kinyume. Kukiwa na hali ya Bila kufunga, vipengele vyote vinalazimishwa kukaa kwenye mstari mmoja. Wakati Kufunga (Wrap) inapowashwa, vipengele visivyotoshea kwenye mstari mmoja vinashuka kwenye mstari unaofuata.
- Sawazisha maudhui (Justify content): Inadhibiti upangaji wa vipengele kando ya mhimili mkuu. Chaguzi zilizopo ni Mwanzo, Mwisho, Katikati, Nafasi katikati, Nafasi pande zote, na Nafasi sawa.
- Panga vipengele (Align items): Inapanga vipengele kando ya mhimili mwingine. Chaguzi ni Mwanzo, Mwisho, Katikati, Kunyoosha, na Mstari wa msingi.
- Panga maudhui (Align content): Sifa hii inafanya kazi tu wakati kuna mistari mingi ya vipengele (yaani, wakati Kufunga (Wrap) imewashwa na vipengele vimeshuka kwenye mstari unaofuata). Inapanga mistari hiyo kama kikundi kando ya mhimili mwingine kwa kutumia chaguzi za Mwanzo, Mwisho, Katikati, Kunyoosha, Nafasi katikati, Nafasi pande zote, na Nafasi sawa.
- Nafasi (Gap): Thamani ya nambari inayoweka nafasi ya wazi kati ya vipengele na kati ya mistari ya vipengele bila kutumia margin.
Vidhibiti vya Vipengele vya Flex (Flex Items)
Kila kipengele kilicho ndani ya chombo cha flex kinaweza kurekebishwa kibinafsi. Unapobofya Ongeza kipengele, kipengele kipya kinaonekana (kwa mfano, "Item 5"). Unaweza kurekebisha sifa zifuatazo kwa kila kipengele:
- Mpangilio (Order): Thamani ya nambari inayobadilisha nafasi ya kuonekana kwa kipengele kwenye skrini bila kubadilisha muundo wa HTML.
- Kukua (Grow): Thamani ya nambari inayofafanua uwezo wa kipengele kukua na kujaza nafasi ya ziada iliyobaki kwenye chombo.
- Kusinyaa (Shrink): Thamani ya nambari inayofafanua uwezo wa kipengele kusinyaa nafasi ya chombo inapokuwa ndogo sana.
- Msingi (Basis): Thamani ya nambari au Msingi wa kiotomatiki (Auto basis) inayoweka saizi ya kuanzia ya kipengele kabla ya nafasi ya ziada kugawanywa.
- Panga chenyewe (Align self): Inaruhusu kipengele kimoja kupuuza sifa ya jumla ya Panga vipengele (Align items) ya chombo. Chaguzi ni Kiotomatiki, Mwanzo, Mwisho, Katikati, Kunyoosha, na Mstari wa msingi.
Mifumo ya Kawaida ya Mpangilio
Chombo hiki kinajumuisha Vipimo vya Awali ili kukusaidia kuona na kuzalisha haraka mifumo ya kawaida ya mpangilio:
- Katikati: Inaweka kipengele katikati kabisa ya chombo kwa kutumia sifa za upangaji kwenye mihimili yote miwili.
- Mwambaa wa Urambazaji: Inatengeneza mpangilio wa usawa ambapo nembo na viungo vya menyu vimesambazwa kwa nafasi sawa.
- Mrundikano (Stack): Inapanga vipengele kwa wima (safuwima) kwa ajili ya fomu au orodha.
- Kadi: Inaunda gridi ya kadi zinazoweza kufungwa na kushuka kwenye mstari unaofuata kulingana na upana wa skrini.
- Mwambaa wa Kando: Inaunda mpangilio wa sehemu kuu ya maudhui na mwambaa wa kando unaobadilika kulingana na nafasi.
Sheria za Uzalishaji wa CSS
Unapotumia jenereta hii, msimbo wa CSS unazalishwa moja kwa moja kwenye sehemu ya CSS. Sheria zifuatazo zinatumika wakati wa uzalishaji wa msimbo:
- Msimbo wa chombo cha flex unajumuisha sifa zote ulizochagua kwenye sehemu ya Chombo (Container).
- Ni vipengele vile tu ambavyo vimefanyiwa mabadiliko ya sifa zake (kama vile kubadilisha Kukua (Grow), Kusinyaa (Shrink), au Mpangilio (Order)) ndivyo vitakavyozalishiwa sheria zao maalum za CSS. Vipengele vilivyo na sifa chaguomsingi havitakuwa na msimbo wa ziada.
- Unapobofya Nakili CSS, hali ya kitufe inabadilika na kuwa "Copied" ili kuonyesha kuwa msimbo umenakiliwa kwenye ubao wa kunakili (clipboard).
Maswali Yanayoulizwa Mara kwa Mara (FAQ)
Kuna tofauti gani kati ya justify-content na align-items?
Justify-content huweka nafasi kati ya vipengele kando ya mhimili mkuu — mwelekeo ambao safu mlalo au safuwima inatiririka — wakati align-items inaviweka kwenye mhimili mwingine. Badilisha mwelekeo kutoka row hadi column na mihimili hiyo miwili inabadilishana, kwa hivyo justify-content inaanza kufanya kazi kutoka juu kwenda chini na align-items kutoka kushoto kwenda kulia.
Je, vidhibiti vya kila kipengele vinafanya kazi vipi?
Chagua kipengele kwa nambari yake, kisha uweke jinsi kinavyokua ili kujaza nafasi ya ziada, jinsi kinavyosinyaa nafasi inapokuwa ndogo, saizi yake ya kuanzia (basis) na upangaji wake kwenye mhimili mwingine. Mpangilio (Order) husogeza kipengele mbele au nyuma kwenye skrini bila kugusa HTML. Vipengele unavyovibadilisha pekee ndivyo vinavyopata sheria zao kwenye CSS.
Je, ni lini wrap na align-content zinakuwa muhimu?
Kukiwa hakuna kufunga (wrap), kila kipengele kinalazimishwa kukaa kwenye mstari mmoja na kinaweza kubonyezwa kuwa chembamba zaidi. Kukiwa na kufunga, vipengele visivyotoshea vinashuka kwenye mstari unaofuata — hapo ndipo align-content inapoanza kufanya kazi, ikipanga mistari kama kikundi. Gap huweka nafasi kati ya vipengele, na kati ya mistari, bila kutumia margin.