CSS - SOMO LA 17: Flexbox Advanced

? 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