justify-content ගුණය

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

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

තෝරන්නා {
	justify-content: flex-start | flex-end | center | space-between | space-around;
}

මූල්‍යයන්

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

පෙරනිමි මූල්‍යය: flex-start.

උදාහරණය . flex-start මූල්‍යය

දැන් අක්ෂයේ දිශාව වමේ සිට දකුණට ය (flex-direction: row මෙය කරයි), සහ කොටු වම් පැත්තට තද කර ඇත:

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

#parent {
	display: flex;
	justify-content: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

උදාහරණය . flex-end මූල්‍යය

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

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

#parent {
	display: flex;
	justify-content: 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;
	justify-content: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

උදාහරණය . space-between මූල්‍යය

කොටු ප්‍රධාන අක්ෂය දිගේ බෙදා හරිනු ලැබේ, පළමු මූලද්‍රව්‍යය අක්ෂයේ ආරම්භයට තද වන අතර, අවසාන මූලද්‍රව්‍යය - අවසානයට තද වේ:

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

#parent {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

උදාහරණය . space-around මූල්‍යය

කොටු ප්‍රධාන අක්ෂය දිගේ බෙදා හරිනු ලැබේ, පළමු කොටුව සහ අක්ෂයේ ආරම්භය අතර, අවසාන කොටුව සහ අක්ෂයේ අවසානය අතර ඉතිරි කොටු අතර ඇති තරම්ම හිඩැසක් පවතී. කෙසේ වෙතත්, හිඩැස් එකතු වී අක්ෂයේ ආරම්භය/අවසානය සහ කොටුව අතර ඇති දුරට වඩා කොටු දෙකක් අතර දුර දෙගුණයක් වේ:

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

#parent {
	display: flex;
	justify-content: space-around;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

උදාහරණය . center මූල්‍යය. අක්ෂය පහලට

ප්‍රධාන අක්ෂයේ දිශාව වෙනස් කරමු, flex-direction column මූල්‍යයකට සකසමු:

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

#parent {
	display: flex;
	justify-content: center;
	flex-direction: column;
	height: 400px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

උදාහරණය . space-between මූල්‍යය. අක්ෂය පහලට

දැන් කොටු සිරස් අතට සමානව බෙදා හරිනු ඇත:

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

#parent {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	height: 400px;
	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>4</div>
	<div>5</div>
</div>

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

මෙයද බලන්න

flex-direction ගුණය,
flex කොටු සඳහා අක්ෂවල දිශාව සකසයි
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 සඳහා කෙටි යෙදුමකි