CSS ရှိ Media Queries များဖြင့် Block များကို ပြန်လည်စီစဉ်ခြင်း

မျက်နှာပြင်အကျယ်အမျိုးမျိုးတွင် block များကို ပြန်လည်စီစဉ်နည်းကို သင်ကြပါစို့။ ဥပမာအနေဖြင့် ဤကဲ့သို့အပြုအမူမျိုးကို အကောင်အထည်ဖော်ပါမည်။

ပထမဆုံး ကျွန်ုပ်တို့၏ block များ၏ HTML ကုဒ်ကို ရေးပါမည်။

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

ယခု ကျွန်ုပ်တို့၏ block များ၏ မိဘ element အတွက် style များကို ရေးပါမည်။

.parent {
	display: flex;
	width: 90%;
	margin: 50px auto;
	border: 1px solid red;
}

ယခု block များအတွက် style များကိုရေးပါ၊ media queries များဖြင့် ပြောင်းလဲမည့် ဂုဏ်သတ္တိများကို မဖော်ပြဘဲထားပါ။

.child {
	box-sizing: border-box;
	padding: 20px;
	border: 1px solid green;
}

မျက်နှာပြင်အကျယ်ကြီးတွင် block များကြားရှိ အကွာအဝေးကို အလိုအလျောက်တွက်ချက်ပါစို့။

@media (min-width: 500px) {
	.parent {
		justify-content: space-between;
	}
}

ကျွန်ုပ်တို့၏ block များ၏ အကျယ်ကို ခြားနားချက်အတွက် နေရာချန်ရန် 50% ထက် အနည်းငယ်ငယ်သတ်မှတ်ပါ။

@media (min-width: 500px) {
	.child {
		width: 49.5%;
	}
}

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

@media (max-width: 500px) {
	.parent {
		flex-direction: column;
	}
}

သူတို့အတွက် အောက်ခြားနားချက်ကို သတ်မှတ်ပါ။

@media (max-width: 500px) {
	.child {
		margin-bottom: 10px;
	}
}

အားလုံးကို စုစည်းပြီး အောက်ပါကုဒ်ကို ရရှိပါမည်။

.parent {
	display: flex;
	width: 90%;
	margin: 50px auto;
}
.child {
	box-sizing: border-box;
	padding: 20px;
	border: 1px solid green;
}

@media (max-width: 500px) {
	.parent {
		flex-direction: column;
	}
	.child {
		margin-bottom: 10px;
	}
}
@media (min-width: 500px) {
	.parent {
		justify-content: space-between;
	}
	.child {
		width: 49.5%;
	}
}

အောက်ပါဥပမာကို ပြန်လုပ်ပါ။