CSS හි flex blocks හි ප්‍රධාන සහ තීරු අක්ෂ
Flexboxes පිළිබඳව කතා කළ හැක්කේ පද දෙකකින් ය: පළමුවැන්න - පේළිය හෝ තීරුව, දෙවැන්න - අක්ෂ පිළිබඳව. පේළි සහ තීරු ගැන අපි දැනටමත් අධ්‍යයනය කර ඇත්තෙමු, දැන් අපි අක්ෂ පිළිබඳව අධ්‍යයනය කරමු. අක්ෂ පිළිබඳ අවබෝධය අවශ්‍ය වන්නේ අංග තිරස් හෝ සිරස් අතට පෙළගස්වා ගැනීම සඳහා ය.
flex අංග සමඟ වැඩ කරන විට සැමවිටම පවතින්නේ
ප්‍රධාන අක්ෂය සහ තීරු අක්ෂය වේ. අපට අංග
ප්‍රධාන අක්ෂය ඔස්සේ සහ ප්‍රධාන අක්ෂයට
තීරු ලෙස පෙළගස්වා ගත හැකිය. ප්‍රධාන අක්ෂයට 4
දිශාවන් තිබිය හැකිය: වමේ සිට දකුණට, දකුණේ සිට වමට,
ඉහළ සිට පහළට සහ පහළ සිට ඉහළට.
තීරු අක්ෂයේ දිශාව රඳා පවතින්නේ ප්‍රධාන අක්ෂයේ දිශාව මත ය: ප්‍රධාන අක්ෂය තිරස් නම්, තීරු අක්ෂය ඉහළ සිට පහළට යොමු වේ, ප්‍රධාන අක්ෂය සිරස් නම්, තීරු අක්ෂය වමේ සිට දකුණට යොමු වේ. වෙනත් දිශාවන් තීරු අක්ෂයට තිබිය නොහැක.
ප්‍රධාන අක්ෂයේ දිශාව පාලනය කරන්නේ
flex-direction ගුණය මගිනි. මෙම ගුණයේ
අගය row නම් - ප්‍රධාන අක්ෂය යොමු වන්නේ
වමේ සිට දකුණට ය, අගය row-reverse නම්,
දකුණේ සිට වමට ය. අගය column
අක්ෂය ඉහළ සිට පහළට යොමු කරයි, සහ අගය column-reverse
- පහළ සිට ඉහළට.
ප්‍රධාන අක්ෂය තිරස් යැයි සිතමු. තීරු අක්ෂය කුමන දිශාවට යොමු වේද?
ප්‍රධාන අක්ෂය සිරස් යැයි සිතමු. තීරු අක්ෂය කුමන දිශාවට යොමු වේද?
තීරු අක්ෂය දකුණට යොමු යැයි සිතමු. එවිට ප්‍රධාන අක්ෂය කුමන දිශාවට යොමු විය හැකිද?
තීරු අක්ෂය පහළට යොමු යැයි සිතමු. එවිට ප්‍රධාන අක්ෂය කුමන දිශාවට යොමු විය හැකිද?
තීරු අක්ෂය දකුණේ සිට වමට යොමු විය හැකිද?
තීරු අක්ෂය පහළ සිට ඉහළට යොමු විය හැකිද?
flex-direction ගුණයේ
අගය row යැයි සිතමු. ප්‍රධාන අක්ෂය
කුමන දිශාවට යොමු වේද? තීරු අක්ෂය
කුමන දිශාවට යොමු වේද?
flex-direction ගුණයේ
අගය column යැයි සිතමු. ප්‍රධාන අක්ෂය
කුමන දිශාවට යොමු වේද? තීරු අක්ෂය
කුමන දිශාවට යොමු වේද?
flex-direction ගුණයේ
අගය row-reverse යැයි සිතමු. ප්‍රධාන අක්ෂය
කුමන දිශාවට යොමු වේද? තීරු අක්ෂය
කුමන දිශාවට යොමු වේද?
flex-direction ගුණයේ
අගය column-reverse යැයි සිතමු. ප්‍රධාන අක්ෂය
කුමන දිශාවට යොමු වේද? තීරු අක්ෂය
කුමන දිශාවට යොමු වේද?