picha

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

       
Author: Rajabu image Tarehe: 2025-07-03 09:48:25 Topic: CSS Main: Masomo File: Download PDF Views 483

Share On:

Share follows: 0 | Unique share links followed: 0
Sponsored links
👉1 Kitau cha Fiqh     👉2 Bongolite - Game zone - Play free game     👉3 Kitabu cha Afya     👉4 ai web app     👉5 Tafasiri ya Riyadh Swalihina     👉6 Simulizi za Hadithi Audio    

Post zinazofanana:

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 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 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 4: Aina za css selecto

Katika somo hili uatkwenda kujifunza aina za css selectors

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