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

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

<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>

.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 အထိ တိုးချဲ့ပြီး ရလဒ်ကို ကြည့်ရှုကြပါစို့။

<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>

.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;
}

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

<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>

.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;
}

ဒြပ်စင်များကြား 20px အကွာအဝေးဖြင့် တန်းလျားတစ်ခုစီတွင် ဒြပ်စင်နှစ်ခုပါသော ကြွေပြားအပြင်အဆင်ကို ပြုလုပ်ပါ။