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 – Kama wrap, 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: 1 na nyingine ina flex-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

1. 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

2. 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

3. Ili kuzuia element kupungua kwenye container ndogo, utatumia?
   a) flex-shrink: 1;
   b) flex-basis: 0;
   c) flex-shrink: 0;
   d) flex-grow: 1;

4. flex: 1 1 100px; inawakilisha nini?
   a) width, height, margin
   b) grow, shrink, basis
   c) left, right, center
   d) row, column, center

5. Kwa layout ya nguzo (columns), utatumia ipi?
   a) flex-direction: row
   b) flex-wrap: column
   c) flex-direction: column
   d) justify-content: flex-column

Nyuma Endelea

Umeionaje Makala hii.. ?

Nzuri            Mbaya            Save

Author: Rajabu Tarehe: 2025-07-03 Topic: CSS Main: ICT File: Download PDF Views 465

Share On:

Facebook WhatsApp

Share follows: 0 | Unique share links followed: 0

Sponsored links
👉1 web hosting    👉2 kitabu cha Simulizi    👉3 Sira ya Mtume Muhammad (s.a.w)    👉4 Dua za Mitume na Manabii    👉5 Kitabu cha Afya    👉6 Madrasa kiganjani   

Post zinazofanana:

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...

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 3: syntax za css yaani sheria za uandishi wa css

Katika somo hili utakwenda kujifunza sheria za uandish wa css yaani syntax za css

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 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 27: Kutumia @import Katika CSS

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...

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 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 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 22: CSS Transition na Animation

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...