CSS ရှိ Flex အစိတ်အပိုင်းများ၏ လောဘ

အခုကျွန်ုပ်တို့မှာ တန်းစီထားသော flex ဘလောက်နှစ်ခုရှိသည်ဆိုပါစို့။ ဤဘလောက်များကို အကျယ် 100px သတ်မှတ်ထားပြီး ၎င်းတို့၏မိဘအရာ (parent) ကို 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 အစိတ်အပိုင်းများကို သတ်မှတ်ပေးသော flex-grow ဂုဏ်သတ္တိကို အသုံးပြုသည်။ ဤဂုဏ်သတ္တိ၏တန်ဖိုးသည် အတိုင်းအတာမဲ့နံပါတ်ဖြစ်သည်။

ဤဂုဏ်သတ္တိ မည်သို့အလုပ်လုပ်သည်ကို လက်တွေ့တွင်ကြည့်ကြပါစို့။

ဥပမာ

လောလောဆယ် ကျွန်ုပ်တို့တွင် အကျယ် 100px ရှိသော flex ဘလောက်နှစ်ခုရှိသည်။ ၎င်းတို့၏စုစုပေါင်းအကျယ်သည် 200px ဖြစ်ပြီး မိဘအရာ၏အကျယ်မှာ 300px ဖြစ်သည်။ ဆိုလိုသည်မှာ လွတ်လပ်သောနေရာ 100px ကျန်နေသည်။

အကယ်၍ အစိတ်အပိုင်းများကို flex-grow မသတ်မှတ်ထားပါက၊ ကျွန်ုပ်တို့သည် ဤလွတ်လပ်သောနေရာကို မြင်ရမည်သာဖြစ်သည်။ သတ်မှတ်ထားပါက၊ အစိတ်အပိုင်းများ၏ လက်တွေ့အကျယ်သည် သတ်မှတ်ထားသည်ထက်ပိုကြီးလာမည် - ၎င်းတို့သည် လွတ်လပ်သောနေရာကို မိမိတို့အချင်းချင်း အချိုးကျ ဝေမျှပြီး ၎င်းတို့၏အကျယ်သို့ ထည့်သွင်းလိုက်မည်။

ဥပမာအားဖြင့် ပထမအစိတ်အပိုင်း၏ flex-grow သည် 1 နှင့် ညီမျှပြီး၊ ဒုတိယအစိတ်အပိုင်း၏တန်ဖိုးမှာ 3 ဖြစ်သည်ဆိုပါစို့။ အစိတ်အပိုင်းတစ်ခုစီသည် လွတ်လပ်သောနေရာ မည်မျှရမည်ကို တွက်ချက်ကြည့်ကြပါစို့။

ဦးစွာပထမ ကျွန်ုပ်တို့၏အစိတ်အပိုင်းအားလုံး၏ flex-grow ယူနစ်စုစုပေါင်းကို ရယူရန် လိုအပ်သည်။ ပထမအစိတ်အပိုင်းတွင် ၎င်းသည် 1 နှင့် ညီမျှပြီး ဒုတိယအစိတ်အပိုင်းတွင်မူ 3 ဖြစ်သည်။ ဆိုလိုသည်မှာ စုစုပေါင်းတွင် ၎င်းသည် 4 နှင့် ညီမျှသည်။

ယခု 100px လွတ်လပ်သောနေရာကို 4 ဖြင့်စားလိုက်ပါက၊ flex-grow တစ်ယူနစ်အတွက် 25px ရသည်ကို တွေ့ရမည်။ ဆိုလိုသည်မှာ၊ ပထမအစိတ်အပိုင်းသို့ 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;
}