align-items ဂုဏ်သတ္တိ

align-items ဂုဏ်သတ္တိသည် flex ဘလောက်များအတွက် ကန့်လန့်ဝင်ရိုးတစ်လျှောက်နှင့် grid များအတွက် ဒေါင်လိုက်ဝင်ရိုးတစ်လျှောက် အစုအဝေးများကို ညှိပေးသည်။ မိဘအစုအဝေးသို့ သက်ရောက်သည်။

ဝါကျဖွဲ့စည်းပုံ

selector {
	align-items: flex-start | flex-end | center | baseline | stretch;
}

တန်ဖိုးများ

တန်ဖိုး	ဖော်ပြချက်
`flex-start`	ဘလောက်များကို ကန့်လန့်ဝင်ရိုး (ဒေါင်လိုက်) ၏ အစဖက်သို့ ကပ်ထားသည်။
`flex-end`	ဘလောက်များကို ကန့်လန့်ဝင်ရိုး (ဒေါင်လိုက်) ၏ အဆုံးဖက်သို့ ကပ်ထားသည်။
`center`	ဘလောက်များကို ကန့်လန့်ဝင်ရိုး (ဒေါင်လိုက်) ၏ အလယ်ဗဟိုတွင် ထားသည်။
`baseline`	အစုအဝေးများကို ၎င်းတို့၏ အခြေခံမျဉ်းအတိုင်း ညှိသည်။ အခြေခံမျဉ်းဆိုသည်မှာ `'p'` နှင့် `'y'` ကဲ့သို့သော ချိတ်ဆွဲခြင်းများကို ထည့်မတွက်ဘဲ စာလုံးများ၏ အောက်ဆုံးအစွန်းမှ ဖြတ်သွားသော မြင်ယောင်ကြည့်ရသော မျဉ်းဖြစ်သည်။
`stretch`	ဘလောက်များကို ဆန့်ထုတ်ကာ ကန့်လန့်ဝင်ရိုးတစ်လျှောက် ရနိုင်သမျှနေရာအားလုံးကို ယူထားသည်၊ သို့သော် `min-width` နှင့် `max-width` သတ်မှတ်ထားပါက ၎င်းတို့ကို ထည့်သွင်းစဉ်းစားသည်။ အစုအဝေးများအတွက် အကျယ်နှင့် အမြင့် သတ်မှတ်ထားပါက - `stretch` ကို လျစ်လျူရှုထားမည်။

စံထားရှိသော တန်ဖိုး: stretch.

ဥပမာ . stretch တန်ဖိုး

လက်ရှိတွင် အဓိကဝင်ရိုးသည် ဘယ်မှညာသို့ ဦးတည်နေပြီး၊ ကန့်လန့်ဝင်ရိုးတစ်လျှောက် အစုအဝေးများသည် အမြင့်အပြည့် ဆန့်ထုတ်ထားသည်:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: stretch;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	border: 1px solid #696989;
}

ဥပမာ . stretch တန်ဖိုး + အစုအဝေးအရွယ်အစား

လက်ရှိတွင် အစုအဝေးများအတွက် အကျယ်နှင့် အမြင့် သတ်မှတ်ထားသောကြောင့်၊ align-items ဂုဏ်သတ္တိအတွက် stretch တန်ဖိုးကို လျစ်လျူရှုထားမည်:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: stretch;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

ဥပမာ . အစုအဝေးအရွယ်အစားမပါဘဲ flex-start တန်ဖိုး

လက်ရှိတွင် အစုအဝေးများသည် အပေါ်ဖက်သို့ ကပ်ထားမည်:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	border: 1px solid #696989;
}

ဥပမာ . flex-start တန်ဖိုး + အစုအဝေးအရွယ်အစား

လက်ရှိတွင် အစုအဝေးများသည် ဆက်လက်ပြီး အပေါ်ဖက်သို့ ကပ်ထားမည်၊ သို့သော် ၎င်းတို့တွင် သတ်မှတ်ထားသော အကျယ်နှင့် အမြင့် ရှိမည်:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

ဥပမာ . flex-end တန်ဖိုး + အစုအဝေးအရွယ်အစား

လက်ရှိတွင် အစုအဝေးများသည် အောက်ဖက်သို့ ကပ်ထားမည်:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: flex-end;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

ဥပမာ . center တန်ဖိုး + အစုအဝေးအရွယ်အစား

လက်ရှိတွင် အစုအဝေးများသည် ကန့်လန့်ဝင်ရိုး (ဒီကိစ္စတွင် ဒေါင်လိုက်) ၏ အလယ်ဗဟိုတွင် ရပ်တည်မည်:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

ဥပမာ . center တန်ဖိုး၊ အရွယ်အစားမတူညီသော အစုအဝေးများ

လက်ရှိတွင် အစုအဝေးများတွင် အမြင့်အရ အရွယ်အစားမတူညီကြပါ (လက်ရှိတွင် ၎င်းတို့ကို စာသားဖြင့် ခွဲထုတ်ထားသော်လည်း height ကိုလည်း သတ်မှတ်နိုင်သည်)၊ အကျယ်မှာ အားလုံးအတွက် တူညီသည်၊ အဘယ့်ကြောင့်ဆိုသော် width ဂုဏ်သတ္တိ သတ်မှတ်ထားသောကြောင့်:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	border: 1px solid #696989;
}

ဥပမာ . baseline တန်ဖိုး၊ အရွယ်အစားမတူညီသော အစုအဝေးများ

အခြေခံမျဉ်းအလိုက် ညှိခြင်းသည် ဤကဲ့သို့ ပုံပေါက်သည်:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: baseline;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 130px;
	line-height: 1;
	border: 1px solid #696989;
}

ဥပမာ . grid တွင် ဒေါင်လိုက်ဝင်ရိုး၏ အစဖက်သို့ ညှိခြင်း

ကျွန်ုပ်တို့၏ အစုအဝေးများကို ဆဲလ်များအတွင်း ဒေါင်လိုက်ဝင်ရိုး၏ အစဖက်သို့ ညှိကြပါစို့:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	align-items: flex-start;
	grid-template-columns: 100px 100px;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

ယခု ကျွန်ုပ်တို့၏ grid ကို browser debugger တွင် �ြည့်ရှုကြည့်ပါ:

ဥပမာ . grid တွင် ဒေါင်လိုက်ဝင်ရိုး၏ အလယ်ဗဟိုသို့ ညှိခြင်း

ယခု ကျွန်ုပ်တို့၏ အစုအဝေးများကို ဆဲလ်များအတွင်း ဒေါင်လိုက်ဝင်ရိုး၏ အလယ်ဗဟိုသို့ ညှိပါမည်:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	align-items: center;
	grid-template-columns: 100px 100px;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Debugger အတွင်း grid ၏ ဖော်ပြချက်ကို ကြည့်ရှုကြည့်ပါ:

ဥပမာ . grid တွင် ဒေါင်လိုက်ဝင်ရိုး၏ အဆုံးဖက်သို့ ညှိခြင်း

အစုအဝေးများ၏ ညှိချက်ကို ထပ်မံပြောင်းလဲမည်၊ ဤတစ်ကြိမ်တွင် ဒေါင်လိုက်ဝင်ရိုး၏ အဆုံးဖက်သို့ ညှိမည်:

<div id="parent">
	<div id="elem1">1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	align-items: end;
	grid-template-columns: 100px 100px;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}
#elem1 {

}

ယခု ကျွန်ုပ်တို့၏ grid သည် debugger မှတဆင့် မည်သို့ပုံပေါ်သည်ကို ကြည့်ရှုကြည့်ပါ:

အခြားကြည့်ရန်

flex-direction ဂုဏ်သတ္တိ,
သည် flex ဘလောက်များ၏ ဝင်ရိုးဦးတည်ချက်ကို သတ်မှတ်ပေးသည်
justify-content ဂုဏ်သတ္တိ,
သည် အဓိကဝင်ရိုးအလိုက် ညှိချက်ကို သတ်မှတ်ပေးသည်
align-items ဂုဏ်သတ္တိ,
သည် ကန့်လန့်ဝင်ရိုးအလိုက် ညှိချက်ကို သတ်မှတ်ပေးသည်
flex-wrap ဂုဏ်သတ္တိ,
သည် flex ဘလောက်များ၏ မျဉ်းကြောင်းများစွာကို သတ်မှတ်ပေးသည်
flex-flow ဂုဏ်သတ္တိ,
flex-direction နှင့် flex-wrap အတွက် အတိုကောက်
order ဂုဏ်သတ္တိ,
သည် flex ဘလောက်များ၏ အစီအစဉ်ကို သတ်မှတ်ပေးသည်
align-self ဂုဏ်သတ္တိ,
သည် ဘလောက်တစ်ခုတည်း၏ ညှိချက်ကို သတ်မှတ်ပေးသည်
flex-basis ဂုဏ်သတ္တိ,
သည် flex ဘလောက်တစ်ခုချင်း၏ အရွယ်အစားကို သတ်မှတ်ပေးသည်
flex-grow ဂုဏ်သတ္တိ,
သည် flex ဘလောက်များ၏ လောဘကို သတ်မှတ်ပေးသည်
flex-shrink ဂုဏ်သတ္တိ,
သည် flex ဘလောက်များ၏ ကျုံ့နိုင်စွမ်းကို သတ်မှတ်ပေးသည်
flex ဂုဏ်သတ္တိ,
flex-grow, flex-shrink နှင့် flex-basis အတွက် အတိုကောက်