align-items ගුණය

align-items ගුණය මගින් flex බ්ලොක් සඳහා අංග අන්තර් අක්ෂය දිගේද, grid සඳහා සිරස් අක්ෂය දිගේද පේළිගත කරයි. මෙය දෙමාපිය අංගයට අදාළ වේ.

වාක්‍ය රටාව

තේරීම {
	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 බ්‍රවුසරයේ දෝෂ නිරාකරණ උපකරණයේ දෙස බලමු:

නිදර්ශනය . 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;
}

දෝෂ නිරාකරණ උපකරණයේ 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 දෝෂ නිරාකරණ උපකරණය හරහා පෙනෙන ආකාරය බලමු:

මෙයද බලන්න

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 සඳහා කෙටි යෙදුමකි