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:


✅ 2. flex-grow

.item {
  flex-grow: 1;
}

✅ 3. flex-shrink

.item {
  flex-shrink: 1;
}

💡 Ikiwa flex-shrink: 0 basi element haitapungua hata container ikiwa ndogo.


✅ 4. flex-basis

.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

 

Jiunge nasi WhatsApp kupata update zetu

Zoezi la Maswali

Nyuma Endelea


Umeionaje Makala hii.. ?

Nzuri            Mbaya            Save
Author: Rajabu image Tarehe: 1970-01-01 03:33:45 Topic: CSS Main: ICT File: Download PDF Views 191

Share On:

Facebook WhatsApp
Sponsored links
👉1 Dua za Mitume na Manabii    👉2 kitabu cha Simulizi    👉3 Simulizi za Hadithi Audio    👉4 Sira ya Mtume Muhammad (s.a.w)    👉5 Bongolite - Game zone - Play free game    👉6 Madrasa kiganjani   

Post zinazofanana:

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