CSS တွင် မှန်ကန်သော အကွာအဝေးများဖြင့် ကြွေပြားအပြင်အဆင်

ဒြပ်စင်များကြား အကွာအဝေးများအတွက် margin များကို အသုံးပြုပြီး အဆင်ပြေစွာ အလုပ်လုပ်သော ကြွေပြားအပြင်အဆင်တစ်ခုကို စစ်မှန်စွာ ဖန်တီးကြပါစို့။ ကနဦးတွင် အကွာအဝေးမရှိသော ဤကဲ့သို့သော ကြွေပြားအပြင်အဆင် ရှိသည်ဆိုပါစို့။

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
  <div class="child">9</div>
</div>

css.parent {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  border: 1px solid red;
}
.child {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

ဒြပ်စင်များကြား အလျားလိုက် အကွာအဝေးများကို margin ဖြင့် ပြုလုပ်ကြပါစို့။

ဤအတွက် ကလေးဒြပ်စင်အားလုံးအတွက် margin-right ကို 10px အဖြစ် သတ်မှတ်ပါမည်။ ပြီးနောက် တတိယမြောက် ကလေးဒြပ်စင်တိုင်းအတွက် ထို margin ကို ပြန်သုညသတ်မှတ်ပါမည်။ တတိယမြောက် ဒြပ်စင်တိုင်းကို ရရှိစေရန် ပါရာမီတာသတ်မှတ်ပေးထားသော nth-child ရှေ့ဆက်ခွဲအမျိုးအစားကို အသုံးပြုပါမည်။

အကွာအဝေးများအတွက် နေရာပေးရန် မိဘဒြပ်စင်၏ အကျယ်ကို 320px အထိ တိုးချဲ့ပြီး ရလဒ်ကို ကြည့်ရှုကြပါစို့။

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
  <div class="child">9</div>
</div>

css.parent {
  display: flex;
  flex-wrap: wrap;
  width: 320px;
  border: 1px solid red;
}
.child {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  margin-right: 10px;
  border: 1px solid green;
}
.child:nth-child(3n) {
  margin-right: 0;
}

Результат:

ထို့ကြောင့် အရာအားလုံး အလုပ်လုပ်နေပါသည်။ နောက်ဆုံးတန်းတွင် ဒြပ်စင်အရေအတွက် နည်းပါးစေရန် နောက်ဆုံးဒြပ်စင်ကို ဖယ်ရှားကြပါစို့။ ထိုသို့ဖြင့် ကျွန်ုပ်တို့၏ နောက်ဆုံးတန်းတွင် ပြဿနာမရှိကြောင်း သေချာစေပါမည်။

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
</div>

css.parent {
  display: flex;
  flex-wrap: wrap;
  width: 320px;
  border: 1px solid red;
}
.child {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  margin-right: 10px;
  border: 1px solid green;
}
.child:nth-child(3n) {
  margin-right: 0;
}

Результат: