CSS - SOMO LA 16: Flexbox Basics

? 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

• Hii ndiyo hatua ya kwanza. Elementi ya mzazi (container) inawekwa kama flex container.

• Elementi za ndani huwa flex items.

.container {
  display: flex;
}

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

✅ 2. flex-direction

• Inaelekeza mwelekeo wa elementi za ndani (row au column):

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

Aina za flex-direction:

• row → kutoka kushoto kwenda kulia

• row-reverse → kutoka kulia kwenda kushoto

• column → kutoka juu kwenda chini

• column-reverse → kutoka chini kwenda juu

✅ 3. justify-content

• Hutumika kupanga nafasi kwa usawa kwenye mstari wa kuu (main axis).

.container {
  justify-content: center;
}

Options:

• flex-start → zinaanzia mwanzo

• center → zinawekwa katikati

• flex-end → zinaishia mwisho

• space-between → nafasi kati yao

• space-around → nafasi pande zote

• space-evenly → nafasi sawa kati yao na pembeni

✅ 4. align-items

• Hupanga nafasi ya elementi kwa msingi wa mwelekeo wa pili (cross axis).

.container {
  align-items: center;
}

Options:

• stretch (default)

• center

• flex-start

• flex-end

• baseline

✅ 5. gap

• Huongeza nafasi kati ya elementi.

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