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.
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.
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;
}
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
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;
}
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.
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 */
}
rows
).container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
columns
).container {
display: flex;
flex-direction: column;
}
💡 Unaweza kutumia flex-basis
au width
/height
kudhibiti ukubwa wa kila item.
<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;
}
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.
Tutaanza kujifunza kuhusu mipaka ya elementi (margin
, border
, padding
, content
) na jinsi vinavyounda Box Model ya CSS.
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
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
Ili kuzuia element kupungua kwenye container ndogo, utatumia?
a) flex-shrink: 1;
b) flex-basis: 0;
c) flex-shrink: 0;
d) flex-grow: 1;
flex: 1 1 100px;
inawakilisha nini?
a) width, height, margin
b) grow, shrink, basis
c) left, right, center
d) row, column, center
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
Umeionaje Makala hii.. ?
Katika somo hili tutajifunza kuhusu CSS Filters — mitindo inayotumika kuhariri mwonekano wa picha, video, au elementi nyingine kwa kuongeza athari kama blur, brightness, contrast, grayscale, na nyinginezo. Hii huifanya tovuti kuwa ya kisasa, ya kuvutia, na yenye mwingiliano mzuri.
Soma Zaidi...Katika somo hili utajifunza aina tano za kuweka rangi kw akutumia css
Soma Zaidi...Katika somo hili utajifunza kuhusu property muhimu ya CSS inayoitwa display, ambayo huamua jinsi element inavyoonyeshwa kwenye ukurasa. Tutachambua aina kuu za display: block, inline, inline-block, na none.
Soma Zaidi...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...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...Katika somo hili, utajifunza mbinu mbalimbali za kubadilisha muonekano wa maandishi kwa kutumia CSS, kama vile kupamba maandishi kwa mistari, kivuli, nafasi kati ya herufi, na mpangilio wa maneno.
Soma Zaidi...Katika somo hili tutajifunza kuhusu z-index, ambayo hutumika kudhibiti ni elementi ipi ionekane juu au chini wakati kuna elementi nyingi zinazofunika sehemu moja. Pia tutajifunza kuhusu stacking context, yaani jinsi vivinjari vinavyopanga
Soma Zaidi...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...Katika somo hili, utajifunza kuhusu pseudo-classes kama :hover, :first-child, na :last-child, pamoja na pseudo-elements kama ::before, ::after, na ::selection. Hizi husaidia kubadili au kuongeza mitindo maalum kulingana na hali ya elementi au sehemu maalum ya elementi.
Soma Zaidi...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...