CSS ရှိ အလိုအလျောက်အကျယ်ပြွန်များဖြင့် ခေါက်တုတ်ခြင်း

ကျွန်ုပ်တို့၏ ခေါက်တုတ်ခြင်းအကြောင်း ယခင်သင်ခန်းစာတွင် element များ၏ width နှင့် ၎င်းတို့၏ margin များပေါင်းလိုက်သောအခါ မိဘ element ၏ width ကို ရရှိရမည်ဟူသော ရလဒ်တစ်ခု ရှိခဲ့သည်။ ၎င်းသည် အနည်းငယ် ယေဘုယျမကျပါ။ မိဘ element ၏ width အတွက် element များသည် အလိုအလျောက် ချိန်ညှိနိုင်ရန် ပြုလုပ်ကြပါစို့။

ကျွန်ုပ်တို့တွင် ဤကဲ့သို့သော မိဘ element တစ်ခု ရှိသည်ဆိုပါစို့။

css.parent {
  display: flex;
  flex-wrap: wrap;
  width: 800px;
  margin: 50px auto;
  border: 1px solid red;
}

ဤခေါက်တုတ်ခြင်း၏ element များသည် တန်းလိုက်4 ပြွန်များအတိုင်း ရှိနေသည်ဆိုပါစို့။

css.child {
  box-sizing: border-box;
  width: 200px;
  height: 100px;
  border: 1px solid green;
}

ကျွန်ုပ်တို့၏ ပြွန်များအကျယ်ကို တစ်ခုစီသည် မိဘ element ၏ လေးပုံတစ်ပုံကို ယူထားစေရန် သတ်မှတ်ပါမည်။ ဤအတွက် ၎င်းတို့၏ အရွယ်အစားကို 25% သတ်မှတ်ပါမည်။

css.child {
  box-sizing: border-box;
  width: 25%;
  height: 100px;
  border: 1px solid green;
}