justify-items ක්‍රියාකාරීත්වය

justify-items ක්‍රියාකාරීත්වය තිරස් අක්ෂය ඔස්සේ දැලිස් කොටු තුළ අංග සැලැස්ම නියම කරයි. සැලැස්ම වඩාත් පැහැදිලිව දැකගත හැක්කේ බ්‍රවුසරයේ දෝශනිය තුළ දැලිස් පෙන්වන විට ය. මාපක මූලද්‍රව්‍යයට යොදනු ලැබේ.

වාක්‍ය රචනා ක්‍රමය

තෝරන්නා {
	justify-items: flex-start | flex-end | center ;
}

අගයන්

අගය	විස්තරය
`flex-start`	අංග තිරස් අක්ෂයේ ආරම්භයට තද කර ඇත.
`flex-end`	ගොනු තිරස් අක්ෂයේ අවසානයට තද කර ඇත.
`center`	ගොනු තිරස් අක්ෂයේ මධ්‍යයේ සිටී.

උදාහරණය . තිරස් අක්ෂයේ ආරම්භයට අනුව සැලැස්ම

අපගේ අංග කොටු තුළ තිරස් අක්ෂයේ ආරම්භයට අනුව සලසමු:

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

#parent {
	display: grid;
	justify-items: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	height: 200px;
	width: 400px;
	border: 2px solid #696989;
}
#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>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	justify-items: center;
	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;
}

බ්‍රවුසරයේ දෝශනිය සම්බන්ධ කිරීමෙන් අපට දැලිස පෙනෙනු ඇත:

උදාහරණය . තිරස් අක්ෂයේ අවසානයට අනුව සැලැස්ම

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

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

#parent {
	display: grid;
	justify-items: end;
	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;
}

දැන් දෝශනිය හරහා දැලිස බලමු:

මෙයද බලන්න

align-items ක්‍රියාකාරීත්වය,
එය හරස් අක්ෂය ඔස්සේ සැලැස්ම නියම කරයි
place-items ක්‍රියාකාරීත්වය,
එය දැලිස් කොටු තුළ අංග සැලැස්ම නියම කරයි