flex ဂုဏ်သတ္တိ

flex ဂုဏ်သတ္တိသည် flex-basis, flex-shrink နှင့် flex-grow တို့အတွက် အတိုကောက်တစ်ခုဖြစ်သည်။

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

တန်ဖိုး၏ အစီအစဥ်သည် အရေးမကြီးပါ။ ဒုတိယနှင့် တတိယ အကန့်သတ်ချက်များ (flex-shrink, flex-basis) သည် မဖြစ်မနေထည့်ရန် မလိုအပ်ပါ။

တန်ဖိုးများ

သက်ဆိုင်ရာ ဂုဏ်သတ္တိများကို ကြည့်ပါ။

စံထားသော တန်ဖိုး: 0 1 auto.

ဥပမာ

ကျွန်ုပ်တို့တွင် အစိတ်အပိုင်း 3 ခု ရှိသည်ဆိုပါစို့။ ၎င်းတို့ထဲမှ တစ်ခုစီ၏ အကျယ်သည် 200px ဖြစ်ပြီး ပေါင်းလိုက်လျှင် 600px နှင့် ညီပါသည်။ ထိုအရာသည် မိဘထည့်ခွက်၏ အကျယ် 300px နှင့် ညီသော အကျယ်ထက် ပိုကြီးနေပါသည်။ ပထမအစိတ်အပိုင်းအတွက် အကျယ် 200px ဟု သတ်မှတ်ကြပါစို့။ ဒုတိယအစိတ်အပိုင်းအတွက် - 300px၊ တတိယအစိတ်အပိုင်းအတွက် - 100px။ အစိတ်အပိုင်းအားလုံးတွင် flex-basis ၏ တန်ဖိုးသည် 1 နှင့် ညီပါစေ။ ထို့ပြင် flex-shrink ၏ တန်ဖိုးမှာ အစိတ်အပိုင်း၏ အစဉ်လိုက်နံပါတ်နှင့် လိုက်၍ 1, 2, 3 ဖြစ်ပါစေ။

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: 200px 1 1;
}
.elem2 {
  flex: 300px 1 2;
}
.elem3 {
  flex: 100px 1 3;
}

Результат:

ဆက်လက်ကြည့်ရှုရန်