CSS တွင် Flexboxes များနှင့်အလုပ်လုပ်ခြင်း

သင်သိသည့်အတိုင်း၊ justify-content ဆိုသည့် property ရှိပါသည်၊ ၎င်းသည် အဓိကဝင်ရိုး (main axis) အတိုင်း အစိတ်အပိုင်းများကို ညှိယူပေးပါသည်။

ထို့အပြင် align-items ဆိုသည့် property လည်းရှိပါသည်၊ ၎င်းသည် ဖြတ်ဝင်ရိုး (cross axis) အတိုင်း အစိတ်အပိုင်းများကို ညှိယူပေးပါသည်။ ကဲ ဒါနဲ့ အနည်းငယ် စမ်းကြည့်ရအောင်။

အခု ကျွန်ုပ်တို့ရဲ့ ဘလောက်များဟာ တန်းလိုက် စီထားတယ်ဆိုပါစို့၊ ဆိုလိုသည်မှာ ဖြတ်ဝင်ရိုးသည် အောက်ဘက်ကို ဦးတည်နေပါသည်။ align-items ကိုအသုံးပြု၍ ဤဘလောက်များကို ဗဟိုသို့ ထားကြပါစို့။

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

.parent {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

အခု ဘလောက်တွေ ထပ်ထည့်ကြည့်ရအောင်၊ flex-wrap ကိုအသုံးပြု၍ �ျဉ်းကြောင်းများစွာ (multi-line) ဖြစ်အောင် ထည့်ကြည့်မယ်၊ မိဘ element ၏ အမြင့်ကို 300px မှ 500px အထိ တိုးချဲ့ပြီး ဤမျဉ်းကြောင်းများစွာ ဖြစ်သော အခြေအနေတွင် align-items က ဘယ်လိုအလုပ်လုပ်လဲဆိုတာ ကြည့်ရအောင်။

<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-direction: row;
	align-items: center;
	flex-wrap: wrap;
	width: 300px;
	height: 500px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

ကျွန်ုပ်တို့မြင်တွေ့ရသည့်အတိုင်း၊ ဗဟိုချက်ညီအောင် သိပ်ကောင်းကောင်း မလုပ်နိုင်ဘူး။ တန်းတစ်ခုချင်းစီက သူ့အတွက် ချထားပေးတဲ့ နေရာမှာ သူ့ဟာသူ ဗဟိုချက်ညီနေသလိုပဲ။ တန်းအားလုံးက တစ်ခုတည်းသော အစုအဖွဲ့အဖြစ် မိဘ element ၏ အလယ်ဗဟိုသို့ ရောက်အောင် လုပ်ကြည့်ရအောင်။

ဤအတွက် မျဉ်းကြောင်းများစွာ စာသားအတွက် လိုအပ်သော align-content ဆိုသည့် property ကို အသုံးပြုရပါမည်။ ကျွန်ုပ်တို့၏ code ကို ပြန်ရေးကြပါစို့။

<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-direction: row;
	align-content: center;
	flex-wrap: wrap;
	width: 300px;
	height: 500px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

align-content property သည် align-items မှာကဲ့သို့သော တန်ဖိုးများကို လက်ခံပါသည်။

space-between တန်ဖိုး

ဥပမာအနေဖြင့် space-between တန်ဖိုးကို ကြည့်ကြပါစို့။ မိဘ element အတွက် အမြင့်ကို 320px အဖြစ် သတ်မှတ်ကြပါစို့။ ကျွန်ုပ်တို့မှာ တန်းသုံးတန်းရှိပြီး၊ ထို့ကြောင့် တန်းများအကြားရှိ နေရာလပ်နှစ်ခုရှိမည်၊ ထိုနေရာလပ်များသည် တစ်ခုစီ 10px စီ ညီမျှကြမည်။

<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-direction: row;
	align-content: space-between;
	flex-wrap: wrap;
	width: 300px;
	height: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

stretch တန်ဖိုး

stretch တန်ဖိုးကို စမ်းကြည့်ကြပါစို့။ ဤသို့လုပ်ရန် ကလေး elements များမှ အမြင့်ကို ဖယ်ရှားပြီး ပိုရှင်းလင်းသော သက်ရောက်မှုအတွက် မိဘ element ၏ အမြင့်ကို 600px အဖြစ် သတ်မှတ်ပါမည်။

<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-direction: row;
	align-content: stretch;
	flex-wrap: wrap;
	width: 300px;
	height: 600px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	border: 1px solid green;
}

align-content အတွက် stretch တန်ဖိုးသည် ပုံသေ (default) တန်ဖိုးဖြစ်ပါသည်။ အကယ်၍ ကျွန်ုပ်တို့သည် ကလေး elements များ၏ အမြင့်ကို လုံးဝဖယ်ရှားပြီး၊ align-content property ကို ဖယ်ရှားကာ၊ သို့သော် မိဘ element ၏ အမြင့်နှင့် flex-wrap ကို ထားရှိပါက - အားလုံးသည် ယခင်အတိုင်း အလုပ်လုပ်နေဦးမည်။

<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-direction: row;
	flex-wrap: wrap;
	width: 300px;
	height: 600px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	border: 1px solid green;
}

အကယ်၍ flex-wrap ကိုပါ ဖယ်ရှားလိုက်ပါက - အားလုံးသည် တစ်တန်းတည်း (single-line) ဖြစ်သွားမည်။

<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-direction: row;
	width: 300px;
	height: 600px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	border: 1px solid green;
}

ဝင်ရိုးကို လှန်ပါ

<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-direction: column;
	width: 300px;
	height: 500px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

<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-direction: column;
	flex-wrap: wrap;
	width: 300px;
	height: 500px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

<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-direction: column;
	align-content: center;
	flex-wrap: wrap;
	width: 300px;
	height: 500px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

အထူးအခြေအနေများ

flex-wrap: wrap မရှိဘဲနှင့် ဘာမှအလုပ်မလုပ်ပါ။ ကျွန်ုပ်တို့မှာ မျဉ်းကြောင်းတစ်ကြောင်းတည်းရှိသည်ဆိုပါစို့။

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

.parent {
	display: flex;
	flex-direction: row;
	align-content: center;
	flex-wrap: wrap;
	width: 300px;
	height: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

flex-wrap: wrap ကိုဖယ်ရှားလိုက်ပါ - align-content: center သည် အလုပ်လုပ်တော့မည် မဟုတ်ပါ။

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

.parent {
	display: flex;
	flex-direction: row;
	align-content: center;
	width: 300px;
	height: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}