Katika somo hili, utajifunza msingi wa mfumo wa Flexbox unaotumika kupanga elementi kwa usahihi ndani ya kontena. Utajifunza kuhusu display: flex;, pamoja na properties muhimu kama justify-content, align-items, flex-direction, na gap.
Flexbox ni mfumo wa kisasa wa kupanga layout za CSS. Lengo lake ni kusaidia kupanga elementi kwa urahisi kwa mwelekeo wa mstari (row) au safu (column), na kuruhusu elementi zijiweke zenyewe kwa kutumia nafasi inayopatikana.
Tofauti na float
au inline-block
, Flexbox huwezesha muundo wa layout uliorahisishwa, unaobadilika bila kuvuruga mpangilio.
display: flex
Hii ndiyo hatua ya kwanza. Elementi ya mzazi (container) inawekwa kama flex container.
Elementi za ndani huwa flex items.
.container {
display: flex;
}
💡 Bila display: flex;
, properties nyingine za Flexbox hazitafanya kazi.
flex-direction
Inaelekeza mwelekeo wa elementi za ndani (row au column):
.container {
flex-direction: row; /* default */
}
flex-direction
:row
→ kutoka kushoto kwenda kulia
row-reverse
→ kutoka kulia kwenda kushoto
column
→ kutoka juu kwenda chini
column-reverse
→ kutoka chini kwenda juu
justify-content
Hutumika kupanga nafasi kwa usawa kwenye mstari wa kuu (main axis).
.container {
justify-content: center;
}
flex-start
→ zinaanzia mwanzo
center
→ zinawekwa katikati
flex-end
→ zinaishia mwisho
space-between
→ nafasi kati yao
space-around
→ nafasi pande zote
space-evenly
→ nafasi sawa kati yao na pembeni
align-items
Hupanga nafasi ya elementi kwa msingi wa mwelekeo wa pili (cross axis).
.container {
align-items: center;
}
stretch
(default)
center
flex-start
flex-end
baseline
gap
Huongeza nafasi kati ya elementi.
.container {
gap: 20px;
}
💡 Unaweza pia kutumia row-gap
na column-gap
.
<div class="container">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
</div>
.container {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
gap: 10px;
}
.item {
background: lightblue;
padding: 20px;
font-weight: bold;
}
Flexbox ni suluhisho rahisi na lenye nguvu kwa kupanga layout. Kwa kutumia display: flex
pamoja na justify-content
, align-items
, flex-direction
, na gap
, unaweza kuunda layout inayobadilika kwa urahisi bila kutumia float au positioning tata.
Ili kuweka elementi katikati kwa usawa kwenye Flexbox, utatumia:
a) align-items: start
b) justify-content: center
c) flex-direction: column
d) position: absolute
flex-direction: column;
ina maana gani?
a) Elementi hujipanga kwenye mstari mlalo
b) Elementi hujipanga kuanzia mwisho
c) Elementi hujipanga juu kwenda chini
d) Elementi hujificha
Tofauti ya justify-content
na align-items
ni nini?
a) Hakuna tofauti
b) Moja hupanga cross axis na nyingine main axis
c) Zote hupanga kwa mwelekeo mmoja
d) Moja ni ya background
gap: 20px;
inafanya nini?
a) Inaongeza padding
b) Inatoa margin ya nje
c) Inaongeza nafasi kati ya flex items
d) Inatoa border
Ili elementi zianze kuonekana kutoka kulia kwenda kushoto, utatumia:
a) flex-direction: column
b) flex-direction: row-reverse
c) justify-content: flex-start
d) align-items: flex-end
kwa muundo sahihi)?
Jiunge nasi WhatsApp kupata update zetuUmeionaje Makala hii.. ?
Katika somo hili, tutajifunza kuhusu CSS Specificity — yaani mfumo wa kipaumbele unaotumiwa na kivinjari kuchagua ni mtindo (style) upi utumike iwapo kuna migongano kati ya selectors mbalimbali. Utaelewa jinsi ya kupanga selectors zako vizuri ili kuzuia matatizo ya mitindo kutofanya kazi kama ulivyotarajia.
Soma Zaidi...Katika somo hili, utajifunza jinsi ya kudhibiti upana (width) na urefu (height) wa elementi katika CSS. Pia utaelewa tofauti kati ya max-width, min-width, na jinsi overflow inavyodhibiti tabia ya content inayoizidi element.
Soma Zaidi...Katika somo hili, utajifunza misingi ya CSS Grid Layout, mfumo wenye nguvu wa kupanga vipengele katika safu (rows) na nguzo (columns). Tutachambua display: grid, pamoja na grid-template-columns, grid-template-rows, gap, grid-column, na grid-row.
Soma Zaidi...Katika somo hili, tutajifunza kuhusu CSS Variables, au Custom Properties. Utajifunza jinsi ya kuunda, kuitumia, na faida za kutumia variables katika CSS ili kuweka msimamizi mzuri wa rangi, ukubwa, na mitindo mingine ya kurudia-rudia.
Soma Zaidi...Katika somo hili utajifunza kuhusu property ya position katika CSS, ambayo hutumika kuamua jinsi element inavyowekwa ndani ya ukurasa. Tutajifunza aina tano kuu za position: static, relative, absolute, fixed, na sticky.
Soma Zaidi...Katika somo hili, utajifunza vipimo vinavyotumika kwenye CSS kama vile px, em, rem, %, vw, na vh. Vipimo hivi hutumika kuweka ukubwa wa maandishi, padding, margin, urefu, na upana wa vipengele kwenye tovuti.
Soma Zaidi...Katika somo hili, utajifunza jinsi ya kudhibiti mipaka (borders) ya vipengele kwa kutumia CSS. Tutajifunza namna ya kuweka unene wa border, rangi, aina ya mstari, na pia jinsi ya kutumia border kwa upande mmoja tu.
Soma Zaidi...Katika somo hili utajifunza aina tano za kuweka rangi kw akutumia css
Soma Zaidi...Katika somo hili tutajifunza kwa kina kuhusu CSS Shorthand Properties — ni nini, jinsi zinavyofanya kazi, faida zake, na mifano mbalimbali ya kutumia shorthand kuandika CSS kwa njia fupi na bora zaidi.
Soma Zaidi...Katika somo hili tutajifunza kuhusu CSS frameworks mbalimbali zinazosaidia kuharakisha uundaji wa mitindo kwenye tovuti. Tutazungumzia frameworks maarufu kama W3.CSS, Bootstrap, Google Fonts, na nyinginezo, faida, matumizi, na tofauti zao.
Soma Zaidi...