Jenereta ya Flexbox

Weka chombo cha flex na vipengele vyake kwa vidhibiti vya macho, tazama mpangilio unavyobadilika moja kwa moja, na unakili CSS kwa mbofyo mmoja.

Vipimo vya Awali
Chombo (Container)
Mwelekeo
Kufunga (Wrap)
Sawazisha maudhui (Justify content)
Panga vipengele (Align items)
Vipengele
Kipengele 1
Panga chenyewe (Align self)
CSS
Rekebisha chombo na vipengele ili kuunda mpangilio wako.

Mpangilio wako unaundwa moja kwa moja kwenye kivinjari chako. Hakuna unachoingiza hapa kinachopakiwa kwenye BroBroGo.

Maswali Yanayoulizwa Sana

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.

Jenereta ya CSS Cubic BezierBuruta mishiko miwili ili kuunda mkondo wa easing, tazama nukta inavyosafiri kulingana na ile thabiti, na unakili thamani ya cubic-bezier().Jenereta ya Border RadiusFanya kila pembe kuwa ya mduara kwa vitelezi, unda maumbo asilia ya blob kwa njia ya duaradufu, na unakili CSS papo hapo.Jenereta ya Box ShadowBuruta vitelezi ili kuunda box-shadow, weka tabaka kwa kina zaidi, na unakili CSS iliyokamilika papo hapo.Jenereta ya GradientUnda gradient ya linear, radial, au conic, ongeza vituo vya rangi na uweke mwelekeo, kisha unakili CSS kwa mbofyo mmoja.Jenereta ya CSS GridWeka safuwima na safu mlalo zako, buruta kwenye seli ili kuweka vipengele, na unakili CSS ya gridi pamoja na HTML inayolingana kwa mbofyo mmoja.Kikokotoo cha CSS clamp()Ingiza saizi ya skrini ndogo na kubwa na upate thamani ya clamp() inayobadilika vizuri katikati yake — kwa ajili ya saizi za fonti, padding, margin au gap.Kigeuzi cha RangiBadilisha rangi kati ya HEX, RGB, HSL, HSV, CMYK na LAB — hariri sehemu yoyote na nyingine zitasasishwa unapoendelea.