flex-shrink ဂုဏ်သတ္တိ
flex-shrink ဂုဏ်သတ္တိသည် flex container အတွင်း လွတ်လပ်သောနေရာ လုံလောက်မှုမရှိပါက flex block တစ်ခုသည် အနီးအနားရှိ အခြားဒြပ်စင်များနှင့် နှိုင်းယှဉ်လျှင် မည်မျှ ကျုံ့သွားမည်ကို သတ်မှတ်ပေးပါသည်။
ဥပမာ၊ flex container အတွင်းရှိ flex block အားလုံးတွင် flex-shrink:1 ရှိပါက ၎င်းတို့သည် အရွယ်အစားအတူတူ ဖြစ်နေမည်ဖြစ်သည်။ တစ်ခုတွင် flex-shrink:2 ရှိပါက ၎င်းသည် အခြားအားလုံးထက် 2 ဆ ပိုသေးငယ်မည်ဖြစ်သည်။
အသုံးပြုသည်: သီးခြား flex block တစ်ခုအတွက်။
ဤဂုဏ်သတ္တိသည် flex ဟူသော အတိုကောက် ဂုဏ်သတ္တိ၏ အစိတ်အပိုင်းတစ်ခုအဖြစ် ပါဝင်ပါသည်။
ဖွဲ့စည်းပုံ
selector {
flex-shrink: ဂဏန်းအပေါင်းတန်ဖိုး;
}
စံထားရာတန်ဖိုး: 1.
ဥပမာ
ကျွန်ုပ်တို့တွင် 3 ခုသော ဒြပ်စင်များ ရှိသည်ဆိုပါစို့။ ၎င်းတို့၏ အကျယ်တစ်ခုစီသည် 200px ရှိပြီး စုစုပေါင်းအကျယ်မှာ 600px ဖြစ်သည်။ ၎င်းသည် မိဘ container ၏ အကျယ် 350px ထက် ပိုကြီးနေပါသည်:
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem2">3</div>
</div>
.parent {
display: flex;
width: 350px;
height: 200px;
border: 1px solid red;
}
.child {
width: 200px;
height: 50px;
border: 1px solid green;
}
.elem1 {
flex-shrink: 1;
}
.elem2 {
flex-shrink: 2;
}
.elem3 {
flex-shrink: 3;
}
:
အနုတ်လက္ခဏာဆောင်သော လွတ်လပ်သည့်နေရာကို အောက်ပါပုံသေနည်းဖြင့် တွက်ကြည့်ပါမည်:
600px - 350px = 250px
flex-shrink ဂုဏ်သတ္တိ၏ တန်ဖိုးများကို ထည့်သွင်းစဉ်းစားပြီး ဒြပ်စင်များ၏ စုစုပေါင်းအလေးချိန်ထားသော အကျယ်မှာ:
200px * 1 + 200px * 2 + 200px * 3 = 1200pxပထမဒြပ်စင် မည်မျှကျုံ့သွားမည်ကို ဆုံးဖြတ်ကြည့်ပါမည်:
250px * 1 (flex-shrink) * 200 (width) / 1200 = 41,6pxဒုတိယဒြပ်စင်:
250px * 2 (flex-shrink) * 200 (width) / 1200 = 83,3pxတတိယဒြပ်စင်:
250px * 3 (flex-shrink) * 200 (width) / 1200 = 125px
flex-shrink တန်ဖိုး 3 ရှိသော တတိယဒြပ်စင်သည် အခြားဒြပ်စင်များထက် ပိုမိုကျုံ့သွားမည်ဟု ဆိုလိုသည်။
ဤအကြောင်းကိုလည်း ကြည့်ပါ
-
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-growဂုဏ်သတ္တိ,
သည် flex block များ၏ လောဘကို သတ်မှတ်ပေးသည် -
flexဂုဏ်သတ္တိ,
flex-grow, flex-shrink နှင့် flex-basis အတွက် အတိုကောက်
