ပင်မဝင်ရိုးတစ်လျှောက် flex element ၏အရွယ်အစား

width နှင့် height ဂုဏ်သတ္တိများသည် ဝင်ရိုးများ၏ဦးတည်ချက်မရွေး flex element ၏ အကျယ်နှင့်အမြင့်ကိုသတ်မှတ်ပေးသည်။ ဆိုလိုသည်မှာ၊ ဝင်ရိုးသည် ရေပြင်ညီဖြစ်ပါက width သည် အကျယ်ကိုသတ်မှတ်မည်ဖြစ်သော်လည်း ဝင်ရိုးသည် ဒေါင်လိုက်ဖြစ်ပါက width သည် ဆက်လက်ပင် အကျယ်ကိုသတ်မှတ်နေမည်ဖြစ်သည်။ တစ်ခါတစ်ရံ ထိုသို့သောအပြုအမူသည် အဆင်မပြေပေ။

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

လက်ရှိတွင် ပင်မဝင်ရိုးသည် ရေပြင်ညီဖြစ်ပြီး၊ flex-basis တွင် တန်ဖိုး 50px ရှိသည်ဆိုပါစို့။ ဤကိစ္စတွင် element များ၏အကျယ် သည် 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;   /* element ၏အရွယ်အစား */
  border: 1px solid green;
}

Результат:

ယခု ဂုဏ်သတ္တိ၏တန်ဖိုးကို မပြောင်းဘဲ ဝင်ရိုးကို လှန်ကြည့်ကြပါစို့။ ဤကိစ္စတွင် element များ၏အမြင့်သည် 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;
}

Результат: