Uratibu wa Vipengele vya Flex kwenye Mhimili Mkuu katika CSS
Sifa justify-content inaruhusu
kuratibu vipengele kwenye mhimili mkuu. Tayari
umeshapita maadili center,
space-between, space-around,
space-evenly. Hebu sasa tujifunze
maadili mengine kadhaa.
Thamani flex-start inasukuma vipengele mwanzo
wa mhimili mkuu, na thamani flex-end - mwisho.
Hebu tuangalie kwa mifano.
Mfano
Tuelekeze mhimili mkuu kutoka kushoto kwenda kulia, kwa kutoa
sifa flex-direction thamani row.
Tusukume vizuizi mwanzo wa mhimili. Kwa hili justify-content
weka kwa thamani flex-start:
.parent {
display: flex;
flex-direction: row; /* mhimili mkuu kutoka kushoto kwenda kulia */
justify-content: flex-start; /* vizuizi mwanzo wa mhimili mkuu */
}
Matokeo ya utekelezaji wa kificho:
Mfano
Hebu sasa tusukume vizuizi mwisho wa mhimili.
Kwa hili justify-content weka
kwa thamani flex-end:
.parent {
display: flex;
flex-direction: row; /* mhimili mkuu kutoka kushoto kwenda kulia */
justify-content: flex-end; /* vizuizi mwisho wa mhimili mkuu */
}
Matokeo ya utekelezaji wa kificho:
Mfano
Tuelekeze sasa mhimili mkuu kutoka kulia kwenda kushoto,
kwa kutoa sifa flex-direction thamani
row-reverse. Tusukume vizuizi mwanzo
wa mhimili, yaani kwenye ukingo wa kulia. Kwa hili justify-content
weka kwa thamani flex-start:
.parent {
display: flex;
flex-direction: row-reverse; /* mhimili mkuu kutoka kulia kwenda kushoto */
justify-content: flex-start; /* vizuizi mwanzo wa mhimili mkuu */
}
Matokeo ya utekelezaji wa kificho:
Mfano
Sasa hebu tusukume vizuizi mwisho wa mhimili mkuu,
yaani kwenye ukingo wa kushoto. Kwa hili justify-content
weka kwa thamani flex-end:
.parent {
display: flex;
flex-direction: row-reverse; /* mhimili mkuu kutoka kulia kwenda kushoto */
justify-content: flex-end; /* vizuizi mwisho wa mhimili mkuu */
}
Matokeo ya utekelezaji wa kificho:
Mfano
Katika mifano iliyopita mhimili mkuu ulikuwa umeelekezwa usawa. Hebu sasa tubadilishe mwelekeo wake na kuuelekeza wima.
Tuelekeze mhimili mkuu chini, kwa kutoa
sifa flex-direction thamani
column.
Tusukume vizuizi mwanzo wa mhimili mkuu, yaani
kuwenye ukingo wa juu. Kwa hili justify-content
weka kwa thamani flex-start:
.parent {
display: flex;
flex-direction: column; /* mhimili mkuu kutoka juu kwenda chini */
justify-content: flex-start; /* vizuizi mwanzo wa mhimili mkuu */
}
Matokeo ya utekelezaji wa kificho:
Mfano
Hebu sasa tusukume vizuizi mwisho wa mhimili mkuu,
yaani kwenye ukingo wa chini. Kwa hili justify-content
weka kwa thamani flex-end:
.parent {
display: flex;
flex-direction: column; /* mhimili mkuu kutoka juu kwenda chini */
justify-content: flex-end; /* vizuizi mwisho wa mhimili mkuu */
}
Matokeo ya utekelezaji wa kificho:
Mfano
Tubadilishe mwelekeo wa mhimili mkuu, tukiuelekeza kutoka chini
kwenda juu. Kwa hili sifa flex-direction
toa thamani column-reverse. Katika
hali hii vizuizi vitabadilisha mpangilio wao -
mwanzo wa mhimili utakuwa na kizuizi cha mwisho katika HTML
kificho.
Hebu tusukume vizuizi mwanzo wa mhimili mkuu,
yaani kwenye ukingo wa chini. Kwa hili justify-content
weka kwa thamani flex-start:
.parent {
display: flex;
flex-direction: column-reverse; /* mhimili mkuu kutoka chini kwenda juu */
justify-content: flex-start; /* vizuizi mwanzo wa mhimili mkuu */
}
Matokeo ya utekelezaji wa kificho:
Mfano
Hebu tusukume vizuizi mwisho wa mhimili mkuu,
yaani kwenye ukingo wa juu. Kwa hili justify-content
weka kwa thamani flex-end:
.parent {
display: flex;
flex-direction: column-reverse; /* mhimili mkuu kutoka chini kwenda juu */
justify-content: flex-end; /* vizuizi mwisho wa mhimili mkuu */
}
Matokeo ya utekelezaji wa kificho:
