Uratibu Vipengele vya Flex kwenye Mhimili wa Kuvuka kwenye CSS
Hebu sasa tuuratibu vizuizi
kwenye mhimili wa kuvuka. Uratibu kwenye mhimili huu
unabainishwa na sifa align-items. Thamani
flex-start inasukuma vipengele mwanzoni mwa
mhimili, na thamani flex-end - mwishoni.
Hebu tujaribu kwenye mifano.
Mfano
Tuelekeze mhimili kuu kutoka kushoto kwenda kulia. Katika hali hii mhimili wa kuvuka utaelekezwa kutoka juu kwa chini. Hebu tuweke upya mpangilio wa vizuizi vyetu kwenye mhimili kuu na kwenye mhimili wa kuvuka.
Kwenye mhimili kuu tusukume vizuizi mwanzoni mwa mhimili,
yaani kwenye upande wa kushoto. Kwa hili justify-content
tuiweke kwa thamani flex-start. Kwenye
mhimili wa kuvuka pia tusukume vizuizi mwanzoni mwa mhimili,
yaani kwenye ukingo wa juu. Kwa hili align-items
pia tuiweke kwa thamani flex-start.
Tuone tunachopata:
.parent {
display: flex;
flex-direction: row; /* mhimili kuu kwenda kulia, kuvuka kwenda chini */
justify-content: flex-start; /* vizuizi mwanzoni mwa mhimili kuu */
align-items: flex-start; /* vizuizi mwanzoni mwa mhimili wa kuvuka */
}
Matokeo ya utekelezaji wa kodi:
Mfano
Hebu sasa tusukume vizuizi mwishoni mwa mhimili wa kuvuka,
yaani chini. Kwa hili align-items
tuiweke kwa thamani flex-end:
.parent {
display: flex;
flex-direction: row; /* mhimili kuu kwenda kulia, kuvuka kwenda chini */
justify-content: flex-start; /* vizuizi mwanzoni mwa mhimili kuu */
align-items: flex-end; /* vizuizi mwishoni mwa mhimili wa kuvuka */
}
Matokeo ya utekelezaji wa kodi:
Mfano
Tuelekeze sasa mhimili kuu kutoka juu kwenda chini. Kwa kuwa mhimili kuu ni wima, basi mhimili wa kuvuka utaelekezwa kutoka kulia kwenda kushoto. Hebu tusukume vizuizi kwenye mihimili yote miwili mwanzoni mwa mihimili yao:
.parent {
display: flex;
flex-direction: column; /* mhimili kuu kwenda chini, kuvuka kwenda kulia */
justify-content: flex-start; /* vizuizi mwanzoni mwa mhimili kuu */
align-items: flex-start; /* vizuizi mwanzoni mwa mhimili wa kuvuka */
}
Matokeo ya utekelezaji wa kodi:
Mfano
Na sasa kwenye mhimili wa kuvuka tusukume vizuizi mwishoni mwa mhimili wake:
.parent {
display: flex;
flex-direction: column; /* mhimili kuu kwenda chini, kuvuka kwenda kulia */
justify-content: flex-start; /* vizuizi mwanzoni mwa mhimili kuu */
align-items: flex-end; /* vizuizi mwishoni mwa mhimili wa kuvuka */
}
Matokeo ya utekelezaji wa kodi:
Mfano
Tusukume vizuizi mwishoni mwa mihimili yote miwili:
.parent {
display: flex;
flex-direction: column; /* mhimili kuu kwenda chini, kuvuka kwenda kulia */
justify-content: flex-end; /* vizuizi mwishoni mwa mhimili kuu */
align-items: flex-end; /* vizuizi mwishoni mwa mhimili wa kuvuka */
}
Matokeo ya utekelezaji wa kodi:
Mfano
Hebu tubadilishe mwelekeo wa mhimili kuu - tuelekeze kutoka chini kwenda juu. Wakati huo huo mhimili wa kuvuka hautabadilisha mwelekeo wake, kwa sababu mhimili kuu bado ni wima.
Tusukume vizuizi mwanzoni mwa mihimili yote miwili:
.parent {
display: flex;
flex-direction: column-reverse; /* mhimili kuu kwenda juu, kuvuka kwenda kulia */
justify-content: flex-start; /* vizuizi mwanzoni mwa mhimili kuu */
align-items: flex-start; /* vizuizi mwanzoni mwa mhimili wa kuvuka */
}
Matokeo ya utekelezaji wa kodi:
