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: flexHii 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-directionInaelekeza 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-contentHutumika 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-itemsHupanga nafasi ya elementi kwa msingi wa mwelekeo wa pili (cross axis).
.container {
align-items: center;
}
stretch (default)
center
flex-start
flex-end
baseline
gapHuongeza 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, utajifunza jinsi ya kudhibiti muonekano wa sehemu ya nyuma (background) ya HTML element kwa kutumia CSS. Utaweza kuongeza rangi, picha, kuweka picha zisirudiwarudiwe, na hata kusogeza picha kwenye maeneo tofauti ya ukurasa.
Soma Zaidi...Katika somo hili utajifunza aina tano za kuweka rangi kw akutumia css
Soma Zaidi...Katika somo hili, utajifunza kuhusu pseudo-classes kama :hover, :first-child, na :last-child, pamoja na pseudo-elements kama ::before, ::after, na ::selection. Hizi husaidia kubadili au kuongeza mitindo maalum kulingana na hali ya elementi au sehemu maalum ya elementi.
Soma Zaidi...Katika somo hili uatkwenda kujifunza aina za css selectors
Soma Zaidi...Katika somo hili, tutajifunza kuhusu @import — amri inayotumika kuingiza faili moja la CSS ndani ya jingine. Tutaona namna ya kuitumia, faida zake, hasara zake, na tofauti kati yake na njia mbadala ya <link> ndani ya HTML.
Soma Zaidi...Katika somo hili tutajifunza kuhusu CSS Timing Functions, ambazo hutumika kudhibiti kasi na mtiririko wa transition na animation. Utaelewa tofauti kati ya ease, linear, ease-in, ease-out, ease-in-out, pamoja na jinsi ya kutumia cubic-bezier() kwa kudhibiti mwendo wa mabadiliko kwenye elementi.
Soma Zaidi...Katika somo hili, utajifunza vipengele vya juu zaidi vya Flexbox: flex-wrap, flex-grow, flex-shrink, na flex-basis. Pia tutajifunza jinsi ya kujenga muundo wa safu (rows) na nguzo (columns) kwa kutumia Flexbox layout.
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...Katika somo hili utajifunza jinsi ya kutumia float ili kupanga elementi upande wa kushoto (left) au kulia (right). Pia utajifunza jinsi ya kutumia clear kuondoa athari za float na kuhakikisha layout yako inabaki thabiti.
Soma Zaidi...Katika somo hili, tutajifunza jinsi ya kuleta miondoko na harakati kwenye tovuti kwa kutumia CSS Transitions na Animations. Hii itasaidia kuboresha muonekano na matumizi ya tovuti.
Soma Zaidi...