CSS හි flex මූලද්රව්යවල ගිජුකම
දැන් අප සතුව පේළියක තබා ඇති flex බ්ලොක් දෙකක් ඇතැයි සිතන්න.
මෙම බ්ලොක් සඳහා පළල 100px ලෙසත්, ඒවායේ දෙමාපියට 300px ලෙසත් ලබා දී ඇත:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
</div>
.parent {
display: flex;
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
width: 100px;
height: 100px;
border: 1px solid green;
}
:
ඔබට පෙනෙන පරිදි, අපගේ මූලද්රව්යවල සම්පූර්ණ පළල දෙමාපියගේ පළලට වඩා අඩු බැවින් දකුණු පසින් හිස් අවකාශයක් ඉතිරි වේ.
අවශ්ය නම්, මෙම හිස් අවකාශය අපගේ මූලද්රව්ය අතර සමානුපාතිකව බෙදා ගත හැකිය.
මෙය සිදු කරනු ලබන්නේ flex-grow ගුණය භාවිතා කරමිනි, එය flex මූලද්රව්යවලට ලබා දෙනු ලැබේ. මෙම ගුණයේ අගය යනු මාන රහිත සංඛ්යාවකි.
මෙම ගුණය ප්රායෝගිකව ක්රියා කරන ආකාරය බලමු.
උදාහරණය
දැන් අප සතුව පළල 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-grow ඇති flex මූලද්රව්ය සහිත
තවත් කේතයක්.
ඉදිරිපත් කරන ලද කේතය අනුව ගණනය කරන්න, එක් එක් මූලද්රව්යයේ මාන කුමක්දැයි
ඇති බව. ඉන්පසු කේතය ක්රියාත්මක කරන්න
සහ ඔබගේ ගණනය කිරීම් සත්ය මාන මැනීමෙන් පරීක්ෂා කරන්න.
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem3">3</div>
</div>
.parent {
display: flex;
width: 500px;
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;
}
.elem3 {
width: 100px;
flex-grow: 1;
}
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem3">3</div>
</div>
.parent {
display: flex;
width: 700px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 100px;
flex-grow: 1;
}
.elem2 {
width: 100px;
flex-grow: 2;
}
.elem3 {
width: 200px;
flex-grow: 3;
}
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem3">3</div>
</div>
.parent {
display: flex;
width: 500px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 100px;
flex-grow: 1;
}
.elem2 {
width: 100px;
flex-grow: 1;
}
.elem3 {
width: 100px;
flex-grow: 1;
}
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem3">3</div>
<div class="child elem4">4</div>
</div>
.parent {
display: flex;
width: 1000px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 200px;
flex-grow: 1;
}
.elem2 {
width: 100px;
flex-grow: 2;
}
.elem3 {
width: 100px;
flex-grow: 4;
}
.elem4 {
width: 100px;
flex-grow: 3;
}
