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

.container {
  display: flex;
}

💡 Bila display: flex;, properties nyingine za Flexbox hazitafanya kazi.


✅ 2. flex-direction

.container {
  flex-direction: row; /* default */
}

Aina za flex-direction:


✅ 3. justify-content

.container {
  justify-content: center;
}

Options:


✅ 4. align-items

.container {
  align-items: center;
}

Options:


✅ 5. gap

.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

  1. Ili kuweka elementi katikati kwa usawa kwenye Flexbox, utatumia:
    a) align-items: start
    b) justify-content: center
    c) flex-direction: column
    d) position: absolute

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

  3. Tofauti ya justify-content na align-items ni nini?
    a) Hakuna tofauti
    b) Moja hupanga cross axis na nyingine main axis
    c) Zote hupanga kwa mwelekeo mmoja
    d) Moja ni ya background

  4. gap: 20px; inafanya nini?
    a) Inaongeza padding
    b) Inatoa margin ya nje
    c) Inaongeza nafasi kati ya flex items
    d) Inatoa border

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

Share On:

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

Post zinazofanana:

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...
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 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 15: Float na Clear katika CSS

Katika somo hili utajifunza jinsi ya kutumia float ili kupanga elementi upande wa kushoto (left) au kulia (right). Pia utajifunza jinsi ya kutumia clear kuondoa athari za float na kuhakikisha layout yako inabaki thabiti.

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 23: Uelewa Zaidi wa CSS Animation na Transition

Somo hili linakuletea ufahamu wa kina juu ya CSS Transitions na Animations, likifafanua vipengele vyake muhimu, matumizi, na namna ya kutumia properties mbalimbali za animation kwa ufanisi katika kurahisisha muonekano na mtumiaji wa tovuti.

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