Hoof- en dwars-as in CSS Flex-bokse
Oor flexbokse kan in twee terme gepraat word: die eerste is - ry of kolom, die tweede - in terme van asse. Ons het reeds met rye en kolomme gewerk, laat ons nou met die asse werk. Om asse te verstaan is nodig om elemente horisontaal of vertikaal uit te lyn.
Wanneer met fleks elemente gewerk word, is daar altyd
'n hoof-as en 'n dwars-as. Ons kan elemente
langs die hoof as en dwarsoor die
hoofas uitlyn. Die hoofas kan 4
rigtings hê: van links na regs, van regs na links,
van bo na onder en van onder na bo.
Die rigting van die dwars as hang af van die rigting van die hoofas: as die hoofas horisontaal is, dan is die dwarsas van bo na onder gerig, as die hoofas vertikaal is, dan is die dwarsas van links na regs gerig. Ander rigtings kan die dwarsas nie hê nie.
Die rigting van die hoofas word gereguleer deur die eienskap
flex-direction. As hierdie eienskap
die waarde row het - is die hoofas gerig
van links na regs, as die waarde row-reverse is,
dan van regs na links. Die waarde column
rig die as van bo na onder, en die waarde column-reverse
- van onder na bo.
Laat die hoofas horisontaal wees. Waarheen sal die dwarsas gerig wees?
Laat die hoofas vertikaal wees. Waarheen sal die dwarsas gerig wees?
Laat die dwarsas na regs gerig wees. Waarheen kan in so 'n geval die hoofas gerig wees?
Laat die dwarsas na onder gerig wees. Waarheen kan in so 'n geval die hoofas gerig wees?
Kan die dwarsas van regs na links gerig wees?
Kan die dwarsas van onder na bo gerig wees?
Laat die eienskap flex-direction die
waarde row hê. Waarheen sal die hoofas gerig wees? Waarheen sal die dwarsas gerig wees?
Laat die eienskap flex-direction die
waarde column hê. Waarheen sal die hoofas gerig wees? Waarheen sal die dwarsas gerig wees?
Laat die eienskap flex-direction die
waarde row-reverse hê. Waarheen sal die hoofas gerig wees? Waarheen sal die dwarsas gerig wees?
Laat die eienskap flex-direction die
waarde column-reverse hê. Waarheen sal
die hoofas gerig wees? Waarheen sal die dwarsas gerig wees?
