align-content ගුණය

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

වාක්‍ය රීතිය

තේරුම් ගන්නා {
	align-content: flex-start | flex-end | center | space-between | space-around;
}

මූල්‍යයන්

මූල්‍යය	විස්තරය
`flex-start`	බ්ලොක් හරස් (සිරස්) අක්ෂයේ ආරම්භයට යොමු කර ඇත.
`flex-end`	බ්ලොක් හරස් (සිරස්) අක්ෂයේ අවසානයට යොමු කර ඇත.
`center`	බ්ලොක් හරස් (සිරස්) අක්ෂයේ මධ්‍යයේ පිහිටා ඇත.
`space-between`	බ්ලොක් හරස් (සිරස්) අක්ෂය දිගේ විසිරී ඇත, පළමු අංගය අක්ෂයේ ආරම්භයටත්, අවසාන අංගය අක්ෂයේ අවසානයටත් යොමු වේ.
`space-around`	බ්ලොක් හරස් (සිරස්) අක්ෂය දිගේ විසිරී ඇත, පළමු බ්ලොක් සහ අක්ෂයේ ආරම්භය අතර, අවසාන බ්ලොක් සහ අක්ෂයේ අවසානය අතර ඇති පරතරය, අනෙක් බ්ලොක් අතර ඇති පරතරයට සමාන වේ. කෙසේ වෙතත්, ඒවා සමාන නොවේ, පෙනෙන පරිදි: පරතරයන් එකතු වන අතර බ්ලොක් දෙකක් අතර දුර බ්ලොක් සහ අක්ෂයේ ආරම්භය/අවසානය අතර දුරට වඩා දෙගුණයකි.

නිදසුන . flex-start මූල්‍යය

මෙම නිදසුනේ, සමාලිංගනය වන අක්ෂය ඉහළ සිට පහළට දිශාගත වේ, එනම් එය හරස් අක්ෂය වේ. ලබා ගත් ප්‍රතිපලයෙන් පෙනෙන පරිදි, අපගේ සියලුම අංග එහි ඉහළ කොටසට යොමු වී ඇත:

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

#parent {
	display: flex;
	align-content: flex-start;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

නිදසුන . flex-end මූල්‍යය

මෙම නිදසුනේ බ්ලොක් හරස් අක්ෂයේ පහළ පැත්තට යොමු වේ, align-content ගුණය flex-end මූල්‍යයට සකසා ඇති නිසා:

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

#parent {
	display: flex;
	align-content: flex-end;
	flex-wrap: wrap;
	height: 200px;
	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>

#parent {
	display: flex;
	align-content: center;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

ග්‍රිඩ් එකක සිරස් අක්ෂයේ ආරම්භයට සමාලිංගනය

අපගේ අංග සිරස් අක්ෂයේ ආරම්භයට සමාලිංගනය කිරීමට ග්‍රිඩ් එකක සකසමු:

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

#parent {
	display: grid;
	align-content: 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;
}

ග්‍රිඩ් එකක සිරස් අක්ෂයේ මධ්‍යයට සමාලිංගනය

දැන් අපි අංග සිරස් අක්ෂයේ මධ්‍යයට සමාලිංගනය කිරීම සකසමු:

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

#parent {
	display: grid;
	align-content: 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;
}

ග්‍රිඩ් එකක සිරස් අක්ෂයේ අවසානයට සමාලිංගනය

අපි අංග සිරස් අක්ෂයේ අවසානයට සමාලිංගනය කිරීම සකසමු:

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

#parent {
	display: grid;
	align-content: 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;
}

මේවාත් බලන්න

flex-direction ගුණය,
එය flex බ්ලොක් වල අක්ෂ දිශාව නියම කරයි
justify-content ගුණය,
එය ප්‍රධාන අක්ෂයට සමාලිංගනය නියම කරයි
align-items ගුණය,
එය හරස් අක්ෂයට සමාලිංගනය නියම කරයි
flex-wrap ගුණය,
එය flex බ්ලොක් වල බහු-පේළි ගතිය නියම කරයි
flex-flow ගුණය,
flex-direction සහ flex-wrap සඳහා කෙටි යෙදුමකි
order ගුණය,
එය flex බ්ලොක් වල අනුපිළිවෙල නියම කරයි
align-self ගුණය,
එය එක් බ්ලොක් එකක සමාලිංගනය නියම කරයි
place-content ගුණය,
එය ප්‍රධාන හා හරස් අක්ෂ දෙකටම සමාලිංගනය නියම කරයි