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 Sira ya Mtume Muhammad (s.a.w) 👉3 Kitabu cha Afya 👉4 Simulizi za Hadithi Audio 👉5 kitabu cha Simulizi 👉6 Madrasa kiganjani
Post zinazofanana:
CSS - SOMO LA 12: Width, Height, Max/Min Width na Overflow
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...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 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 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 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 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 10: Box Model katika CSS
Katika somo hili utajifunza muundo wa boksi (Box Model) katika CSS. Box model ni mfumo wa msingi wa kupanga vipengele katika ukurasa wa HTML, ukiwa na sehemu kuu nne: content, padding, border, na margin.
Soma Zaidi...CSS - SOMO LA 29: CSS z-index na Stacking Context
Katika somo hili tutajifunza kuhusu z-index, ambayo hutumika kudhibiti ni elementi ipi ionekane juu au chini wakati kuna elementi nyingi zinazofunika sehemu moja. Pia tutajifunza kuhusu stacking context, yaani jinsi vivinjari vinavyopanga
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 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...