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 Tafasiri ya Riyadh Swalihina 👉2 Bongolite - Game zone - Play free game 👉3 Simulizi za Hadithi Audio 👉4 kitabu cha Simulizi 👉5 Kitabu cha Afya 👉6 ai web app
Post zinazofanana:
CSS - SOMO LA 11: Mitindo ya Border (Border Styles)
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...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...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...CSS - SOMO LA 24: CSS Variables (Custom Properties)
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...CSS - SOMO LA 17: Flexbox Advanced
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...CSS - SOMO LA 33: CSS Frameworks
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...CSS - SOMO LA 9: Margin na Padding
Katika somo hili utajifunza tofauti kati ya margin na padding, kazi ya kila moja, jinsi ya kuzipima, na jinsi zinavyotumika kudhibiti nafasi ndani na nje ya elementi kwenye ukurasa wa HTML.
Soma Zaidi...CSS - SOMO LA 14: Position Property
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...CSS - SOMO LA 25: CSS Shorthand Properties
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...CSS - SOMO LA 30: CSS Functions – calc(), clamp(), var(), min(), max() na Custom Functions
Katika somo hili, tutajifunza kuhusu CSS functions muhimu zinazotumika kufanya mahesabu, kuweka vipimo vya kisasa vinavyobadilika kulingana na hali ya kifaa, na kutumia variables. Tutazingatia functions kama: calc(), clamp(), var(), min(), max(), na mwishoni tutajifunza jinsi ya kutengeneza custom function kwa kutumia variables.
Soma Zaidi...