CSS හි හරස් අක්ෂය දිගේ flex බ්ලොක් සම කිරීම
දැන් අපි බ්ලොක් හරස් අක්ෂය දිගේ ද සම කරමු. මෙම අක්ෂය දිගේ සම කිරීම
align-items ගුණාංගය මගින් නිර්වචනය කෙරේ. flex-start අගය
අංග අක්ෂයේ ආරම්භයට ඇද දමයි, සහ flex-end අගය - අවසානයට.
අපි උදාහරණ මගින් උත්සාහ කරමු.
උදාහරණය
ප්රධාන අක්ෂය වමේ සිට දකුණට යොමු කරමු. මෙම අවස්ථාවේ දී හරස් අක්ෂය ඉහල සිට පහළට යොමු වේ. අපි අපගේ බ්ලොක් පිහිටීම ප්රධාන අක්ෂය දිගේ සහ හරස් අක්ෂය දිගේ සකස් කරමු.
ප්රධාන අක්ෂය දිගේ බ්ලොක් එහි ආරම්භයට,
එනම් වම් දාරයට ඇද දමමු. මේ සඳහා justify-content
flex-start අගයට සකසමු.
හරස් අක්ෂය දිගේ ද බ්ලොක් එහි ආරම්භයට,
එනම් ඉහළ දාරයට ඇද දමමු. මේ සඳහා align-items
flex-start අගයට සකසමු.
අපට ලැබෙන දේ බලමු:
.parent {
display: flex;
flex-direction: row; /* ප්රධාන අක්ෂය දකුණට, හරස් අක්ෂය පහළට */
justify-content: flex-start; /* බ්ලොක් ප්රධාන අක්ෂයේ ආරම්භයට */
align-items: flex-start; /* බ්ලොක් හරස් අක්ෂයේ ආරම්භයට */
}
කේතය ක්රියාත්මක කිරීමේ ප්රතිඵලය:
උදාහරණය
දැන් අපි බ්ලොක් හරස් අක්ෂයේ අවසානයට,
එනම් පහළට ඇද දමමු. මේ සඳහා align-items
flex-end අගයට සකසමු:
.parent {
display: flex;
flex-direction: row; /* ප්රධාන අක්ෂය දකුණට, හරස් අක්ෂය පහළට */
justify-content: flex-start; /* බ්ලොක් ප්රධාන අක්ෂයේ ආරම්භයට */
align-items: flex-end; /* බ්ලොක් හරස් අක්ෂයේ අවසානයට */
}
කේතය ක්රියාත්මක කිරීමේ ප්රතිඵලය:
උදාහරණය
දැන් ප්රධාන අක්ෂය ඉහළ සිට පහළට යොමු කරමු. ප්රධාන අක්ෂය සිරස් වන බැවින්, හරස් අක්ෂය දකුණේ සිට වමට යොමු වේ. අපි බ්ලොක් අක්ෂ දෙකේම ඒවායේ ආරම්භයට ඇද දමමු:
.parent {
display: flex;
flex-direction: column; /* ප්රධාන අක්ෂය පහළට, හරස් අක්ෂය දකුණට */
justify-content: flex-start; /* බ්ලොක් ප්රධාන අක්ෂයේ ආරම්භයට */
align-items: flex-start; /* බ්ලොක් හරස් අක්ෂයේ ආරම්භයට */
}
කේතය ක්රියාත්මක කිරීමේ ප්රතිඵලය:
උදාහරණය
දැන් හරස් අක්ෂය දිගේ බ්ලොක් එහි අවසානයට ඇද දමමු:
.parent {
display: flex;
flex-direction: column; /* ප්රධාන අක්ෂය පහළට, හරස් අක්ෂය දකුණට */
justify-content: flex-start; /* බ්ලොක් ප්රධාන අක්ෂයේ ආරම්භයට */
align-items: flex-end; /* බ්ලොක් හරස් අක්ෂයේ අවසානයට */
}
කේතය ක්රියාත්මක කිරීමේ ප්රතිඵලය:
උදාහරණය
බ්ලොක් අක්ෂ දෙකේම අවසානයට ඇද දමමු:
.parent {
display: flex;
flex-direction: column; /* ප්රධාන අක්ෂය පහළට, හරස් අක්ෂය දකුණට */
justify-content: flex-end; /* බ්ලොක් ප්රධාන අක්ෂයේ අවසානයට */
align-items: flex-end; /* බ්ලොක් හරස් අක්ෂයේ අවසානයට */
}
කේතය ක්රියාත්මක කිරීමේ ප්රතිඵලය:
උදාහරණය
ප්රධාන අක්ෂයේ දිශාව වෙනස් කරමු - එය පහළ සිට ඉහළට යොමු කරමු. මෙම අවස්ථාවේ දී හරස් අක්ෂය එහි දිශාව වෙනස් නොකරයි, මන්ද ප්රධාන අක්ෂය තවමත් සිරස් වේ.
බ්ලොක් අක්ෂ දෙකේම ආරම්භයට ඇද දමමු:
.parent {
display: flex;
flex-direction: column-reverse; /* ප්රධාන අක්ෂය ඉහළට, හරස් අක්ෂය දකුණට */
justify-content: flex-start; /* බ්ලොක් ප්රධාන අක්ෂයේ ආරම්භයට */
align-items: flex-start; /* බ්ලොක් හරස් අක්ෂයේ ආරම්භයට */
}
කේතය ක්රියාත්මක කිරීමේ ප්රතිඵලය:
