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

flex-shrink ဂုဏ်သတ္တိသည် flex container အတွင်း လွတ်လပ်သောနေရာ လုံလောက်မှုမရှိပါက flex block တစ်ခုသည် အနီးအနားရှိ အခြားဒြပ်စင်များနှင့် နှိုင်းယှဉ်လျှင် မည်မျှ ကျုံ့သွားမည်ကို သတ်မှတ်ပေးပါသည်။

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

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

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

ဖွဲ့စည်းပုံ

cssselector {
  flex-shrink: ဂဏန်းအပေါင်းတန်ဖိုး;
}

စံထားရာတန်ဖိုး: 1.

ဥပမာ

ကျွန်ုပ်တို့တွင် 3 ခုသော ဒြပ်စင်များ ရှိသည်ဆိုပါစို့။ ၎င်းတို့၏ အကျယ်တစ်ခုစီသည် 200px ရှိပြီး စုစုပေါင်းအကျယ်မှာ 600px ဖြစ်သည်။ ၎င်းသည် မိဘ container ၏ အကျယ် 350px ထက် ပိုကြီးနေပါသည်:

html<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
  <div class="child elem2">3</div>
</div>

css.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;
}

Результат:

အနုတ်လက္ခဏာဆောင်သော လွတ်လပ်သည့်နေရာကို အောက်ပါပုံသေနည်းဖြင့် တွက်ကြည့်ပါမည်:

flex-shrink ဂုဏ်သတ္တိ၏ တန်ဖိုးများကို ထည့်သွင်းစဉ်းစားပြီး ဒြပ်စင်များ၏ စုစုပေါင်းအလေးချိန်ထားသော အကျယ်မှာ:

ပထမဒြပ်စင် မည်မျှကျုံ့သွားမည်ကို ဆုံးဖြတ်ကြည့်ပါမည်:

ဒုတိယဒြပ်စင်:

တတိယဒြပ်စင်:

flex-shrink တန်ဖိုး 3 ရှိသော တတိယဒြပ်စင်သည် အခြားဒြပ်စင်များထက် ပိုမိုကျုံ့သွားမည်ဟု ဆိုလိုသည်။

ဤအကြောင်းကိုလည်း ကြည့်ပါ