CSS တွင် နှစ်ကော်လံ ဝဘ်ဆိုဒ် ဒီဇိုင်းပုံစံ ဖန်တီးခြင်း

အောက်ပါပုံစံအတိုင်း နှစ်ကော်လံ ဒီဇိုင်းတစ်ခု ဖန်တီးကြပါစို့။

ပထမဆုံးအနေနဲ့ စာမျက်နှာရဲ့ အခြေခံဖွဲ့စည်းပုံကို ဖန်တီးကြပါမယ်။

<div id="wrapper">
	<div id="header">
		header
	</div>
	<div id="container">
		<div id="content">
			content
		</div>
		<div id="sidebar">
			sidebar
		</div>
	</div>
	<div id="footer">
		footer
	</div>
</div>

ယခု wrapper အတွက် style များကို သတ်မှတ်ပြီး စခရင်၏အလယ်တွင် ညှိပေးကြပါမယ်။

#wrapper {
	width: 1000px;
	margin: 30px auto;
	border: 1px solid black;
}

ယခု header နှင့် footer အတွက် style များကို သတ်မှတ်ပါမယ်။

#header {
	height: 200px;
	border: 1px solid black;
}
#footer {
	height: 200px;
	border: 1px solid black;
}

မြင်တဲ့အတိုင်းပဲ၊ header နဲ့ footer ကို အမြင့် သတ်မှတ်ပေးထားပါတယ်။ ကျွန်ုပ်တို့၏ ဒီဇိုင်းတွင် ၎င်းတို့တွင် အကြောင်းအရာမရှိသောကြောင့် ဤသို့လုပ်ဆောင်ခြင်းဖြစ်ပါတယ်။ အကြောင်းအရာရှိပါက block များအတွက် အမြင့်ကို သတ်မှတ်သင့်ပါဘူး - ၎င်းတို့၏အကြောင်းအရာကြောင့် အမြင့်ဖြစ်ပေါ်လာပါလိမ့်မယ်။

ထို့အပြင် ကျွန်ုပ်တို့သည် ၎င်းတို့အတွက် အကျယ်ကို သတ်မှတ်မပေးကြောင်း သတိပြုပါ။ အကြောင်းမှာ header နှင့် footer တို့သည် block element များဖြစ်ပြီး ၎င်းတို့၏အကျယ်သည် wrapper ၏အကျယ်နှင့် အလိုအလျောက် ညီမျှနေမည်ဖြစ်ပါတယ်။

ယခု ၎င်းတို့ကို padding ပေးကြပါစို့၊ သို့မှသာ စာသားများ အနားသတ်များနှင့် ကပ်မနေတော့ပါ။

#header {
	height: 200px;
	padding: 20px;
	border: 1px solid black;
}
#footer {
	height: 200px;
	padding: 20px;
	border: 1px solid black;
}

သို့သော် padding ရှိခြင်းသည် block များ၏အရွယ်အစားကို ဆိုးရွားစွာ သက်ရောက်မှုရှိစေပါမယ် - ၎င်းတို့သည် သတ်မှတ်ထားသည်ထက် ပိုကြီးလာပါလိမ့်မယ်။ ကျွန်ုပ်တို့၏ block များကို padding နှင့် အနားသတ်များက မကျယ်ပြန့်စေရန် block အားလုံး၏အပြုအမူကို ပြောင်းလဲကြပါစို့။

* {
	box-sizing: border-box;
}

ယခု ကျွန်ုပ်တို့သည် content နှင့် sidebar ကို တစ်တန်းတည်းထားရန် လိုအပ်ပါတယ်။ Flex များကို အသုံးပြု၍ ပြုလုပ်ကြပါစို့။

#container {
	display: flex;
}

content နှင့် sidebar အတွက် ၎င်းတို့၏အကျယ်ကို သတ်မှတ်ပေးပါ။ ဤသို့ပြုလုပ်စဉ်တွင် ၎င်းတို့၏အကျယ်များ၏ ပေါင်းလဒ်သည် wrapper ၏အကျယ်နှင့် ညီရပါမယ်။

#content {
	width: 800px;
}
#sidebar {
	width: 200px;
}

sidebar နှင့် content အကြားတွင် အကွာအဝေးတစ်ခု ထားလိုသည်ဆိုပါစို့။ ဤသို့ဆိုလျှင် sidebar အတွက် margin ထားရန်လိုအပ်ပါတယ်။ ဤသို့ပြုလုပ်စဉ်တွင် ဤ margin အတွက် အကျယ်ကို တစ်စုံတစ်ခုမှ နှုတ်ယူရပါမယ်။ content မှနှုတ်ယူပြီး၊ ၎င်း၏အကျယ်ကို လျှော့ချပါမယ်။

#content {
	width: 780px;
}
#sidebar {
	width: 200px;
	margin-right: 20px;
}

ကျွန်ုပ်တို့၏ element များတွင် အကြောင်းအရာမပါသောကြောင့် အမြင့်ကို ထည့်ကြပါစို့။ element တစ်ခုတည်းအတွက် အမြင့်ထည့်ရန် လုံလောက်ပါတယ်၊ အဘယ်ကြောင့်ဆိုသော် ဒုတိယ flex element သည် အမြင့်နှင့်လိုက်ဖက်သွားမည်ဖြစ်သည် (ဘာကြောင့်လဲ?)။ content အတွက် အမြင့်ကို သတ်မှတ်ပါစို့။

#content {
	width: 780px;
	height: 700px;
}
#sidebar {
	width: 200px;
	margin-right: 20px;
}

ယခု content နှင့် sidebar အတွက် ကျန်ရှိသော style များကို ထည့်ပါမယ်။

#content {
	width: 780px;
	height: 700px;
	padding: 20px;
	border: 1px solid black;
}
#sidebar {
	width: 200px;
	margin-right: 20px;
	padding: 20px;
	border: 1px solid black;
}

အားလုံးပြီးပါပြီ၊ ကျွန်ုပ်တို့၏ ဒီဇိုင်းပုံစံပြီးပါပြီ။ ကုဒ်အားလုံးကို အတူတကွစုစည်းပါမယ်။

<div id="wrapper">
	<div id="header">
		header
	</div>
	<div id="container">
		<div id="sidebar">
			sidebar
		</div>
		<div id="content">
			content
		</div>
	</div>
	<div id="footer">
		footer
	</div>
</div>

* {
	box-sizing: border-box;
}

#wrapper {
	width: 1000px;
	margin: 30px auto;
	border: 1px solid black;
}
#header {
	height: 200px;
	padding: 20px;
	border: 1px solid black;
}
#container {
	display: flex;
}
#content {
	width: 780px;
	height: 700px;
	padding: 20px;
	border: 1px solid black;
}
#sidebar {
	width: 200px;
	margin-right: 20px;
	padding: 20px;
	border: 1px solid black;
}
#footer {
	height: 200px;
	padding: 20px;
	border: 1px solid black;
}