CSS - SOMO LA 16: Flexbox Basics
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.
📘 Utangulizi
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.
📚 Maudhui ya Somo
✅ 1. 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.
✅ 2. flex-direction
-
Inaelekeza mwelekeo wa elementi za ndani (row au column):
.container {
flex-direction: row; /* default */
}
Aina za flex-direction:
-
row→ kutoka kushoto kwenda kulia -
row-reverse→ kutoka kulia kwenda kushoto -
column→ kutoka juu kwenda chini -
column-reverse→ kutoka chini kwenda juu
✅ 3. justify-content
-
Hutumika kupanga nafasi kwa usawa kwenye mstari wa kuu (main axis).
.container {
justify-content: center;
}
Options:
-
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
✅ 4. align-items
-
Hupanga nafasi ya elementi kwa msingi wa mwelekeo wa pili (cross axis).
.container {
align-items: center;
}
Options:
-
stretch(default) -
center -
flex-start -
flex-end -
baseline
✅ 5. gap
-
Huongeza nafasi kati ya elementi.
.container {
gap: 20px;
}
💡 Unaweza pia kutumia row-gap na column-gap.
✅ 6. Mfano Kamili
<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;
}
✅ Hitimisho
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.
🔜 Somo Linalofuata: SOMO LA 17 - Box Model katika CSS
🧠Maswali ya Kujitathmini
-
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-contentnaalign-itemsni 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.. ?
👉1 Simulizi za Hadithi Audio 👉2 kitabu cha Simulizi 👉3 Dua za Mitume na Manabii 👉4 ai web app 👉5 web hosting 👉6 Kitau cha Fiqh
Post zinazofanana:
CSS - SOMO LA 18: Grid Layout
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...CSS - SOMO LA 26: CSS Specificity (Kipaumbele cha Styles)
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...CSS - SOMO LA 7: Kutumia Fonti (Fonts) kwenye CSS
Katika somo hili utajifunza jinsi ya kudhibiti mwonekano wa maandishi kwa kutumia fonti kwenye CSS. Utajifunza jinsi ya kubadilisha aina ya fonti, ukubwa, mtindo, unene, na mpangilio wa maandishi ili yaweze kuonekana kwa mvuto na usomaji bora.
Soma Zaidi...CSS - somo la 2: Jinsi ya ku weka code za css kwenye HTML
katika somo hili utajifunza jinsi ya ku install css kwenye ukurasa wa html
Soma Zaidi...Drone: Nyuki Dume na Majukumu Yake
Simulizi hii inaelezea maisha ya nyuki dume, zinazojulikana kama drone. Inafafanua majukumu yao, maisha yao ya kila siku ndani ya kiwanda cha nyuki, na hatima yao baada ya kufanikisha kuzaliana na kifalme cha nyuki. Simulizi pia inaangazia tofauti zao na nyuki wa kike, na umuhimu wao katika uzazi wa kifalme.
Soma Zaidi...CSS - somo la 1: Maana ya CSS, kazi zake na historia yake
Katika somo hili utakwenda kujifunza maana ya CSS, pia nitakujulisha kazi zake. Mwisho utatambuwa historia ya CSS toka kuanzishwa.
Soma Zaidi...CSS - SOMO LA 20: Media Queries na Responsive Design
Katika somo hili, utajifunza jinsi ya kutumia media queries kwa ajili ya kutengeneza tovuti zinazojibadilisha kulingana na ukubwa wa skrini. Tutazungumzia @media rules, breakpoints, na dhana ya mobile-first design.
Soma Zaidi...Jinsi ya kumsaidia Mtoto mdogo aliyekabwa na kitu kooni
Mfano wa kitu kinachoweza kumaba mtoto kooni ni kama chagula kigumu, pesa ya sarafu, kijiwe na mengineyo. Endapo hili litataokea msaada wa haraka unahitajika kwa ulazima.
Soma Zaidi...CSS - SOMO LA 19: Pseudo-classes na Pseudo-elements
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...CSS - SOMO LA 28: CSS Timing Functions
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...