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

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

သဒ္ဒါဖွဲ့စည်းပုံ

ရွေးချယ်သူ {
	align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

တန်ဖိုးများ

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

စံထားရာအတိုင်း တန်ဖိုး - auto.

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

ဤဥပမာတွင် ဘလောက်အားလုံးအတွက် flex-start တန်ဖိုးသတ်မှတ်ထားသည် (align-items ဂုဏ်သတ္တိ)၊ တတိယဘလောက်အတွက် - align-self ဂုဏ်သတ္တိကို stretch တန်ဖိုးဖြင့် သတ်မှတ်ထားသည်:

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

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

ဥပမာ . flex-end တန်ဖိုး

ဤဥပမာတွင် ဘလောက်အားလုံးအတွက် align-items ဂုဏ်သတ္တိကို flex-start တန်ဖိုးသတ်မှတ်ထားပြီး တတိယဘလောက်အတွက် - align-self ဂုဏ်သတ္တိကို flex-end တန်ဖိုးဖြင့် သတ်မှတ်ထားသည်:

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

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

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

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

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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 {
	align-self: start;
}

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

ပထမဆုံးအစိတ်အပိုင်း၏ ဒေါင်လိုက်ဝင်ရိုး၏အလယ်ဗဟိုသို့ ညှိခြင်းကို သတ်မှတ်ကြပါစို့:

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

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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 {
	align-self: center;
}

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

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

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

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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 {
	align-self: end;
}

ဤသည်ကိုလည်း ကြည့်ပါ

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