flex-grow ဂုဏ်သတ္တိ

flex-grow ဂုဏ်သတ္တိသည် လိုအပ်ပါက တစ်ခုတည်းသော flex-block တစ်ခုသည် ကပ်လျက် element များထက် မည်မျှကြီးနိုင်သည်ကို သတ်မှတ်ပေးသည်။

ဥပမာ၊ flex-container အတွင်းရှိ flex-block အားလုံးတွင် flex-grow:1 ရှိပါက ၎င်းတို့သည် အရွယ်အစားအတူတူ ဖြစ်လိမ့်မည်။ တစ်ခုတွင် flex-grow:2 ရှိပါက၊ ၎င်းသည် အခြားအားလုံးထက် 2 ဆကြီးလိမ့်မည်။

Element များ၏ စုစုပေါင်းအကျယ်သည် မိဘ၏အကျယ်ထက် ပိုနည်းနေပါက ညာဘက်တွင် ဗလာနေရာ ကျန်ရှိနေသည်။ လိုချင်ပါက ထိုဗလာနေရာကို ကျွန်ုပ်တို့၏ element များအကြား ပမာဏအလိုက် ခွဲဝေနိုင်သည်။ ၎င်းကို flex-element များအတွက် သတ်မှတ်ပေးသည့် flex-grow ဂုဏ်သတ္တိဖြင့် ပြုလုပ်သည်။ ဤဂုဏ်သတ္တိ၏ တန်ဖိုးသည် အတိုင်းအတာမဲ့ ကိန်းတစ်ခုဖြစ်သည်။

အသုံးပြုသည်: တိကျသော flex block တစ်ခုအတွက်။

ဤဂုဏ်သတ္တိသည် အတိုကောက် ဂုဏ်သတ္တိ flex အတွင်းသို့ အစိတ်အပိုင်းတစ်ခုအနေဖြင့် ပါဝင်သည်။

ဝါကျဖွဲ့စည်းပုံ

selector {
	flex-grow: ဂဏန်းအပေါင်း;
}

စံသတ်မှတ်ချက် တန်ဖိုး: 0။

ဥပမာ

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

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

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

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

ယခု 100px လွတ်နေသောအကွာအဝေးကို 4 ဖြင့် စားလိုက်ပါက flex-grow တစ်ယူနစ်အတွက် 25px ရသည်ကို တွေ့ရမည်။ ဆိုလိုသည်မှာ ပထမ element သို့ flex-grow တစ်ယူနစ် ဆိုလိုသည်မှာ 25px ထပ်ပေါင်းထည့်မည်ဖြစ်ပြီး ဒုတိယ element သို့ ယူနစ်သုံးခု ဆိုလိုသည်မှာ 75px ထပ်ပေါင်းထည့်မည်။

ပထမ element ၏ အနံသည် 125px ဖြစ်လာမည်၊ ဒုတိယ element ၏ အနံမှာ 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 နှင့် တူပါစေ၊ ပထမ element ၏အနံ 200px၊ ဒုတိယ element ၏အနံမှာ 100px ဖြစ်ပါစေ။ ဆိုလိုသည်မှာ လွတ်နေသောအကွာအဝေးသည် တစ်ဖန် 100px နှင့် တူပါမည်။

Element တစ်ခုစီအား flex-grow ကို 1 နှင့် တူအောင် သတ်မှတ်ကြပါစို့။ စုစုပေါင်းတန်ဖိုးသည် 2 ဖြစ်လာမည်၊ ဆိုလိုသည်မှာ 100px လွတ်နေသောအကွာအဝေးကို 2 ဖြင့် စားရမည်။ ဆိုလိုသည်မှာ လောဘတစ်ယူနစ်အတွက် 50px ရရှိမည်။

Element အားလုံး၏ flex-grow တန်ဖိုးတူညီသောကြောင့် element အားလုံးသို့ တူညီသောတန်ဖိုး 50px ထပ်ပေါင်းထည့်မည်။ ဆိုလိုသည်မှာ ပထမ element သည် 250px ဖြစ်လာမည်ဖြစ်ပြီး ဒုတိယ element သည် 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 နှင့် တူပါစေ၊ ပထမ element ၏အနံ 200px၊ ဒုတိယ element ၏အနံမှာ 100px ဖြစ်ပါစေ။

ယခု ပထမ element အတွက် flex-grow တန်ဖိုးကို 3 အဖြစ် သတ်မှတ်ပြီး ဒုတိယ element အတွက် 1 အဖြစ် သတ်မှတ်ကြပါစို့။ စုစုပေါင်းလောဘတန်ဖိုးသည် 4 ဖြစ်လာမည်။ ထိုအခါ လောဘတစ်ယူနစ်၏တန်ဖိုးမှာ 100px / 4 = 25px ဖြစ်သည်။

ပထမ element သို့ 75px ထပ်ပေါင်းထည့်မည်၊ ၎င်းသည် 275px ဖြစ်လာမည်ဖြစ်ပြီး ဒုတိယ element သို့ - 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 block များ၏ဝင်ရိုးဦးတည်ချက်ကို သတ်မှတ်ပေးသည်
justify-content ဂုဏ်သတ္တိ,
သည် အဓိကဝင်ရိုးအတိုင်း ညှိပေးခြင်းကို သတ်မှတ်ပေးသည်
align-items ဂုဏ်သတ္တိ,
သည် ကန့်လန့်ဝင်ရိုးအတိုင်း ညှိပေးခြင်းကို သတ်မှတ်ပေးသည်
flex-wrap ဂုဏ်သတ္တိ,
သည် flex block များ၏ မျိုးစုံလိုင်းဖြစ်မှုကို သတ်မှတ်ပေးသည်
flex-flow ဂုဏ်သတ္တိ,
flex-direction နှင့် flex-wrap အတွက် အတိုကောက်
order ဂုဏ်သတ္တိ,
သည် flex block များ၏ အစီအစဥ်ကို သတ်မှတ်ပေးသည်
align-self ဂုဏ်သတ္တိ,
သည် တစ်ခုတည်းသော block ၏ ညှိပေးခြင်းကို သတ်မှတ်ပေးသည်
flex-basis ဂုဏ်သတ္တိ,
သည် တိကျသော flex block ၏ အရွယ်အစားကို သတ်မှတ်ပေးသည်
flex-shrink ဂုဏ်သတ္တိ,
သည် flex block များ၏ ကျုံ့နိုင်စွမ်းကို သတ်မှတ်ပေးသည်
flex ဂုဏ်သတ္တိ,
flex-grow, flex-shrink နှင့် flex-basis အတွက် အတိုကောက်