align-self ගුණාංගය

align-self ගුණාංගය තනි flex-කොටසක් සඳහා හරස් අක්ෂය දිගේ සහ ග්‍රිඩ් එකක තනි මූලද්‍රව්‍යයක් සඳහා සිරස් අක්ෂය දිගේ පෙළගැස්ම සකසයි. මූලිකව මෙම ගුණාංගය 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;
}

උදාහරණය . ග්‍රිඩ් එකක සිරස් අක්ෂයේ ආරම්භය ඔස්සේ පෙළගැස්ම

පළමු මූලද්‍රව්‍යය සඳහා සිරස් අක්ෂයේ ආරම්භය ඔස්සේ පෙළගැස්ම සකසමු:

<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;
}

උදාහරණය . ග්‍රිඩ් එකක සිරස් අක්ෂයේ මැද ඔස්සේ පෙළගැස්ම

පළමු මූලද්‍රව්‍යය සිරස් අක්ෂයේ මැද ඔස්සේ පෙළගැස්ම සකසමු:

<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;
}

උදාහරණය . ග්‍රිඩ් එකක සිරස් අක්ෂයේ අවසානය ඔස්සේ පෙළගැස්ම

ග්‍රිඩ් එකේ අපගේ පළමු මූලද්‍රව්‍යය සිරස් අක්ෂයේ අවසානය ඔස්සේ පෙළගැස්ම සකසමු:

<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 ගුණාංගය,
ප්ලෙක්ස් කොටස්වල අක්ෂවල දිශාව නියම කරයි
justify-content ගුණාංගය,
ප්‍රධාන අක්ෂය දිගේ පෙළගැස්ම නියම කරයි
align-items ගුණාංගය,
හරස් අක්ෂය දිගේ පෙළගැස්ම නියම කරයි
flex-wrap ගුණාංගය,
ප්ලෙක්ස් කොටස්වල බහු-පේළි ගතිය නියම කරයි
flex-flow ගුණාංගය,
flex-direction සහ flex-wrap සඳහා කෙටි යෙදුමකි
order ගුණාංගය,
ප්ලෙක්ස් කොටස්වල අනුපිළිවෙල නියම කරයි
flex-basis ගුණාංගය,
නිශ්චිත ප්ලෙක්ස් කොටසක ප්‍රමාණය නියම කරයි
flex-grow ගුණාංගය,
ප්ලෙක්ස් කොටස්වල ලෝභකම නියම කරයි
flex-shrink ගුණාංගය,
ප්ලෙක්ස් කොටස්වල හකුළුවා ගැනීමේ හැකියාව නියම කරයි
flex ගුණාංගය,
flex-grow, flex-shrink සහ flex-basis සඳහා කෙටි යෙදුමකි