flex-basis ပိုင်ဆိုင်မှု

flex-basis ပိုင်ဆိုင်မှုသည် တိကျသော flex-ဘလောက်၏ အရွယ်အစားကို ၎င်းထံသို့ အခြား flex ဂုဏ်သတ္တိများ မအသုံးပြုမီ သတ်မှတ်ပေးသည်။ ယေဘူယျအားဖြင့်၊ ပိုင်ဆိုင်မှုသည် အဓိကဝင်ရိုး ဘောင်တစ်လျှောက် အစိတ်အပိုင်း၏ အရွယ်အစားကို သတ်မှတ်ပေးသည်။ ဆိုလိုသည်မှာ အဓိကဝင်ရိုးသည် ရေပြင်ညီဖြစ်လျှင် - ဤပိုင်ဆိုင်မှုသည် အစိတ်အပိုင်းများ၏ အကျယ်ကို သတ်မှတ်မည်ဖြစ်ပြီး၊ ဒေါင်လိုက်ဖြစ်လျှင် - အမြင့်ကို သတ်မှတ်မည်ဖြစ်သည်။

တိကျသော flex ဘလောက်တစ်ခုအတွက် သက်ရောက်သည်။

ဤပိုင်ဆိုင်မှုသည် အတိုကောက်ပိုင်ဆိုင်မှု flex ၏ အစိတ်အပိုင်းတစ်ခုဖြစ်သည်။

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

cssselector {
  flex-basis: မည်သည့် CSS ယူနစ်များ (နှင့် ရာခိုင်နှုန်းများ) | auto;
}

စံထားသတ်မှတ်ချက်: auto.

ဥပမာ

ကျွန်ုပ်တို့၏ အဓိကဝင်ရိုးသည် ရေပြင်ညီဖြစ်ပြီး၊ flex-basis တွင် 50px ဖိုသတ်မှတ်ချက် ရှိသည်ဆိုပါစို့။ ဤကိစ္စတွင် အစိတ်အပိုင်းများ၏ အကျယ်သည် 50px ဖြစ်လိမ့်မည်:

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

css.parent  {
  display: flex;
  flex-direction: row; /* ဝင်ရိုးသည် ရေပြင်ညီဖြစ်သည် */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px; /* အစိတ်အပိုင်း၏ အရွယ်အစား */
  border: 1px solid green;
}

Результат:

ဥပမာ

ယခု ဝင်ရိုးကို လှန်ကြည့်ရအောင်၊ flex-basis ပိုင်ဆိုင်မှု၏ ဖိုသတ်မှတ်ချက်ကို မပြောင်းဘဲ။ ဤကိစ္စတွင် အစိတ်အပိုင်းများ၏ အမြင့်သည် 50px ဖြစ်လိမ့်မည်:

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

css.parent {
  display: flex;
  flex-direction: column; /* ဝင်ရိုးသည် ဒေါင်လိုက်ဖြစ်သည် */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px;
  border: 1px solid green;
}

Результат:

ဆက်လက်ဖတ်ရှုရန်