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.
📘 Utangulizi
Baada ya kujifunza msingi wa Flexbox, hatua inayofuata ni kuelewa jinsi ya kudhibiti namna elementi zinavyobadilika kulingana na ukubwa wa container. Hii ni muhimu kwa layout zinazobadilika (responsive design), ambapo content inapaswa kujiweka upya kulingana na nafasi inayopatikana.
📚 Maudhui ya Somo
✅ 1. flex-wrap
Kwa chaguo-msingi, Flexbox hujaribu kuweka elementi zote kwenye mstari mmoja. Ikiwa hazitoshi, unaweza kuruhusu zipindike kwa kutumia flex-wrap.
.container {
display: flex;
flex-wrap: wrap;
}
Thamani zake:
-
nowrap– (default) Elementi zote kwenye mstari mmoja -
wrap– Elementi huenda mstari wa pili ikiwa nafasi haitoshi -
wrap-reverse– Kamawrap, lakini hupinda juu badala ya chini
✅ 2. flex-grow
-
Inaelezea ni kiasi gani element inaweza kukua ikilinganishwa na nyingine.
-
Thamani ya kawaida ni
0(haikui). -
Ikiwa element moja ina
flex-grow: 1na nyingine inaflex-grow: 2, ya pili itachukua nafasi mara mbili zaidi.
.item {
flex-grow: 1;
}
✅ 3. flex-shrink
-
Inaelezea ni kwa kiasi gani element inaweza kupungua ikihitajika.
-
Thamani ya kawaida ni
1.
.item {
flex-shrink: 1;
}
💡 Ikiwa flex-shrink: 0 basi element haitapungua hata container ikiwa ndogo.
✅ 4. flex-basis
-
Inafafanua upana wa awali wa element kabla haijakua au kupungua.
-
Inaweza kuwekwa kwa px, %, em, au
auto.
.item {
flex-basis: 200px;
}
💡 Unapochanganya hizi zote tatu (flex-grow, flex-shrink, flex-basis), unaweza kutumia kwa muundo mmoja:
.item {
flex: 1 1 200px; /* grow shrink basis */
}
✅ 5. Muundo wa Columns na Rows
👉 Kufanya safu (rows)
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
👉 Kufanya nguzo (columns)
.container {
display: flex;
flex-direction: column;
}
💡 Unaweza kutumia flex-basis au width/height kudhibiti ukubwa wa kila item.
✅ 6. Mfano Kamili
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
.container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.item {
flex: 1 1 150px;
background: lightgreen;
padding: 20px;
text-align: center;
}
✅ Hitimisho
Kwa kutumia flex-wrap, flex-grow, flex-shrink, na flex-basis, unaweza kutengeneza layout zinazobadilika na zinazojirekebisha kulingana na nafasi iliyopo. Hii inafanya Flexbox kuwa chombo bora kwa responsive web design.
🔜 Somo Linalofuata: SOMO LA 18 - Box Model katika CSS
Tutaanza kujifunza kuhusu mipaka ya elementi (margin, border, padding, content) na jinsi vinavyounda Box Model ya CSS.
🧠Maswali ya Kujitathmini
-
flex-wrap: wrap;inamaanisha nini?
a) Elementi zote zitabanwa kwenye mstari mmoja
b) Elementi zitaruhusiwa kuhamia mstari mpya
c) Elementi zitawekwa kama column
d) Hakuna mabadiliko kwenye layout -
flex-grow: 2;inamaanisha nini?
a) Element haitakua kabisa
b) Element itakuwa mara mbili ya nyingine zenye grow 1
c) Element itawekwa katikati
d) Element itazungukwa na border -
Ili kuzuia element kupungua kwenye container ndogo, utatumia?
a)flex-shrink: 1;
b)flex-basis: 0;
c)flex-shrink: 0;
d)flex-grow: 1; -
flex: 1 1 100px;inawakilisha nini?
a) width, height, margin
b) grow, shrink, basis
c) left, right, center
d) row, column, center -
Kwa layout ya nguzo (columns), utatumia ipi?
a)flex-direction: row
b)flex-wrap: column
c)flex-direction: column
d)justify-content: flex-column
Jiunge nasi WhatsApp kupata update zetu
Umeionaje Makala hii.. ?
👉1 Kitau cha Fiqh 👉2 Tafasiri ya Riyadh Swalihina 👉3 Bongolite - Game zone - Play free game 👉4 Dua za Mitume na Manabii 👉5 Simulizi za Hadithi Audio 👉6 kitabu cha Simulizi
Post zinazofanana:
CSS - SOMO LA 8: Upambaji wa Maandishi (Text Styling)
Katika somo hili, utajifunza mbinu mbalimbali za kubadilisha muonekano wa maandishi kwa kutumia CSS, kama vile kupamba maandishi kwa mistari, kivuli, nafasi kati ya herufi, na mpangilio wa maneno.
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...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 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 34: if() Condition katika CSS
Katika somo hili, tutajifunza kipengele kipya kinachoitwa if() function ndani ya CSS, kilichoanza kupatikana kwenye toleo la Chrome 137. Kipengele hiki kinaturuhusu kuandika mantiki ya masharti moja kwa moja kwenye property ya CSS, bila kutumia JavaScript wala media query zilizotawanyika. Tutajifunza pia aina za queries: media(), supports(), na style() pamoja na matumizi yao ya kivitendo kwenye tovuti. Mwisho, tutaeleza kwa kina kuhusu pointer na any-pointer.
Soma Zaidi...CSS - somo la 6: Kuweka Background kwenye HTML kwa kutumia CSS
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...CSS - SOMO LA 21: CSS Units
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...CSS - somo la 5: Njia tano zinazotumika kuweka rangi kwenye css
Katika somo hili utajifunza aina tano za kuweka rangi kw akutumia css
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 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...