CSS හි flex මූලද්‍රව්‍යවල ශුන්‍ය ග්‍රීඩිමත්වය

එක්තරා මූලද්‍රව්‍යයක් සඳහා flex-grow ශුන්‍යයට සමාන නම්, එම මූලද්‍රව්‍යය නිදහස් අවකාශය බෙදාහැරීමේදී සහභාගී නොවේ. පෙරනිමියෙන්, ග්‍රීඩිමත්වයට ශුන්‍ය අගයක් ඇති අතර, එබැවින් flex-grow නිශ්චිතව නොමැති මූලද්‍රව්‍ය අතර නිදහස් අවකාශය බෙදාගන්නේ නැත.

උදාහරණයක් ලෙස ගණනය කිරීමක් කරමු. අපට flex මූලද්‍රව්‍ය තුනක් ඇතැයි සිතමු, ඒ සෑම එකක්ම පළලින් 100px වේ. පළමු මූලද්‍රව්‍යයට flex-grow නොමැති (හෝ එය 0 වේ) යැයි සිතමු, දෙවන මූලද්‍රව්‍යයට flex-grow ඇති අතර එය 2 වේ, තුන්වන මූලද්‍රව්‍යයට ඇත්තේ 3 වේ.

මව් මූලද්‍රව්‍යයේ පළල 500px වේ යැයි සිතමු. එවිට නිදහස් අවකාශය 200px වනු ඇත, flex-grow හි එක් ඒකකයකට 200px / 5 = 40px වැටේ. පළමු මූලද්‍රව්‍යයේ පළල 100px ලෙසම පවතිනු ඇත, එය බෙදාහැරීමට සහභාගී නොවන බැවින්, දෙවන මූලද්‍රව්‍යයේ පළල 100px + 2 * 40px = 180px වනු ඇත, තුන්වන මූලද්‍රව්‍යයේ පළල 100px + 3 * 40px = 220px වේ.

ප්‍රායෝගික කාර්යයන්

පහත දක්වා ඇති සියලුම කාර්යයන් වලදී, ඔබට පළල සහ 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: 0;
}
.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: 900px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 300px;
	flex-grow: 0;
}
.elem2 {
	width: 200px;
	flex-grow: 3;
}
.elem3 {
	width: 100px;
	flex-grow: 2;
}

<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: 700px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 200px;
	flex-grow: 0;
}
.elem2 {
	width: 200px;
	flex-grow: 0;
}
.elem3 {
	width: 100px;
	flex-grow: 1;
}
.elem4 {
	width: 100px;
	flex-grow: 1;
}