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