flex-grow ගුණය
flex-grow ගුණය අර්ථ දක්වන්නේ,
අවශ්ය නම්, තනි flex-කොටසක්
යාබද මූලද්රව්යවලට වඩා කොපමණ විශාල විය හැකිද
යන්නයි.
උදාහරණයක් ලෙස, flex-පටිගතක ඇතුළත සියලුම flex-කොටස්
flex-grow:1 ඇත්නම්, ඒවා එකම ප්රමාණයේ
වේ. ඒවායින් එකක් flex-grow:2 ඇත්නම්,
එය ඉතිරිය සියල්ලට වඩා 2 ගුණයකින් විශාල
වේ.
මූලද්රව්යවල සම්පූර්ණ පළල
මව් අංගයේ පළලට වඩා අඩු නම්, දකුණු පස හිස් අවකාශය
ඉතිරි වේ. අපේක්ෂා කරන පරිදි මෙම හිස් අවකාශය
සමානුපාතිකව අපගේ මූලද්රව්ය අතර බෙදා හැරිය හැකිය.
මෙය සිදු කරනු ලබන්නේ flex-grow ගුණය භාවිතා කරමිනි,
යොදනු ලබනුයේ flex-මූලද්රව්ය සඳහා වේ. මෙම
ගුණයේ අගය ලෙස මාන රහිත අංකයක් සේවය කරයි.
යොදනු ලැබේ: නිශ්චිත flex කොටසකට.
මෙම ගුණය කෙටි ගුණය වන
flex වල
සංඝටක කොටසක් ලෙස ඇතුළත් වේ.
වාක්ය රීතිය
තේරුම් කරන්නා {
flex-grow: ධන අංකය;
}
පෙරනිමි අගය: 0.
උදාහරණය
දැන් අපට 100px පළලින් යුත් flex-කොටස් දෙකක් ඇත.
මූලද්රව්යවල සම්පූර්ණ පළල
200px වන අතර, මව් අංගයේ පළල - 300px වේ.
එහි ප්රතිඵලයක් ලෙස, 100px නිදහස් අවකාශය
ඉතිරි වේ.
මූලද්රව්ය සඳහා flex-grow නියම කර නොමැති නම්,
අපි මෙම නිදහස් අවකාශය සරලව දකින්නෙමු.
නමුත් එය නියම කර ඇත්නම්, මූලද්රව්යවල සැබෑ පළල
නියම කළ පළලට වඩා වැඩි වනු ඇත - ඒවා සමානුපාතිකව
තමන් අතර නිදහස් අවකාශය බෙදා ගනු ඇත
සහ එය තම පළලට එකතු කර ගනු ඇත.
උදාහරණයක් සඳහා පළමු මූලද්රව්යයේ flex-grow
සමාන වේවා 1, සහ දෙවැන්න - 3. අපි
ගණනය කරමු, නිදහස් අවකාශයෙන් කොටසක්
සෑම මූලද්රව්යයක්ම ලබා ගනු ඇත.
පළමුව, අපගේ සියලුම මූලද්රව්යවල
flex-grow ඒකක ගණනේ එකතුව
ලබා ගත යුතුය.
පළමු මූලද්රව්යයේ එය 1 සමාන වන අතර,
දෙවන මූලද්රව්යයේ - 3 වේ. මෙයින් අදහස් කරන්නේ එකතුවෙහි
එය 4 සමාන වන බවයි.
දැන් 100px නිදහස් අවකාශය
4 න් බෙදන්න සහ ලබා ගන්න, එනම් 25px යනු
flex-grow එක් ඒකකයකට ය.
පළමු මූලද්රව්යයට එක් ඒකකයක් එකතු වනු ඇත
flex-grow, එනම් 25px, සහ
දෙවැන්නට - ඒකක තුනක්,
එනම් 75px වේ.
පළමු මූලද්රව්යයේ පළල 125px වනු ඇත,
සහ දෙවැන්න - 175px:
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
</div>
.parent {
display: flex;
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 100px;
flex-grow: 1;
}
.elem2 {
width: 100px;
flex-grow: 3;
}
:
උදාහරණය
දැන් මව් අංගයේ පළල 400px සමාන වේවා,
පළමු මූලද්රව්යයේ පළල 200px, සහ දෙවන මූලද්රව්යයේ පළල - 100px වේවා. ප්රතිඵලය,
නිදහස් අවකාශය නැවතත්
100px සමාන වේ.
අපි සෑම මූලද්රව්යයකටම flex-grow නියම කරමු,
සමාන වේ 1. එකතුවෙන් 2 ලැබේ,
එනම් 100px නිදහස් අවකාශය
2 න් බෙදිය යුතුය. ප්රතිඵලය,
50px එක්
ලොභ ඒකකයකට ය.
සියලුම මූලද්රව්යවලට එකම අගය
flex-grow ඇති බැවින්, සියලුම මූලද්රව්යවලට එකතු වනු ඇත
එකම අගය 50px කින්. මෙයින් අදහස් කරන්නේ,
පළමු මූලද්රව්යය 250px බවට පත් වනු ඇත, සහ
දෙවැන්න 150px බවට පත් වනු ඇත:
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
</div>
.parent {
display: flex;
width: 400px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 200px;
flex-grow: 1;
}
.elem2 {
width: 100px;
flex-grow: 1;
}
:
උදාහරණය
නැවතත් මව් අංගයේ පළල 400px සමාන වේවා,
පළමු මූලද්රව්යයේ පළල 200px, සහ දෙවන මූලද්රව්යයේ පළල - 100px වේවා.
දැන් අපි පළමු මූලද්රව්යයට සකසමු
flex-grow අගය 3 ලෙස, සහ දෙවැන්නට
- අගය 1 ලෙස. ප්රතිඵලය, ලොභය
එකතුවෙන් 4 සමාන වේ. එවිට එක් ඒකකයක්
ලොභය සමාන වේ 100px / 4 = 25px
පළමු මූලද්රව්යයට 75px එකතු වනු ඇත,
සහ එය 275px බවට පත් වනු ඇත, සහ දෙවැන්නට -
25px, එය 125px බවට පත් වනු ඇත:
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
</div>
.parent {
display: flex;
width: 400px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 200px;
flex-grow: 3;
}
.elem2 {
width: 100px;
flex-grow: 1;
}
:
මෙයද බලන්න
-
flex-directionගුණය,
මෙමගින් flex කොටස්වල අක්ෂවල දිශාව නියම කරයි -
justify-contentගුණය,
මෙමගින් ප්රධාන අක්ෂය දිගේ පෙළගැස්ම නියම කරයි -
align-itemsගුණය,
මෙමගින් හරස් අක්ෂය දිගේ පෙළගැස්ම නියම කරයි -
flex-wrapගුණය,
මෙමගින් flex කොටස්වල බහු පේළිත්වය නියම කරයි -
flex-flowගුණය,
flex-direction සහ flex-wrap සඳහා කෙටි යෙදුම -
orderගුණය,
මෙමගින් flex කොටස්වල අනුපිළිවෙල නියම කරයි -
align-selfගුණය,
මෙමගින් එක් කොටසක පෙළගැස්ම නියම කරයි -
flex-basisගුණය,
මෙමගින් නිශ්චිත flex කොටසක ප්රමාණය නියම කරයි -
flex-shrinkගුණය,
මෙමගින් flex කොටස්වල හකුළුවන ස්වභාවය නියම කරයි -
flexගුණය,
flex-grow, flex-shrink සහ flex-basis සඳහා කෙටි යෙදුම
