place-content ගුණය
place-content ගුණය
ෆ්ලෙක්ස් මූලද්රව්ය සඳහා මූලික සහ
ක්රෝස් අක්ෂ දිගේ සහ
ග්රිඩ් සඳහා තිරස් සහ සිරස් අක්ෂ දිගේ
සම කිරීම නියම කරයි. පළමු අගය මගින් මූලික (තිරස්) අක්ෂය දිගේ සම කිරීම,
දෙවන අගය මගින් - ක්රෝස් (සිරස්) අක්ෂය දිගේ සම කිරීම නියම කරයි.
ගුණය යොදනු ලබන්නේ
ප්රධාන මූලද්රව්යයට.
වාක්ය රචනය
තෝරන්නා {
place-content: මූලික_අක්ෂය ක්රෝස්_අක්ෂය;
}
උදාහරණය . මූලික අක්ෂයේ ආරම්භය දිගේ සහ ක්රෝස් අක්ෂයේ මධ්යය දිගේ සම කිරීම
දැන් මූලද්රව්ය මූලික අක්ෂයේ ඉහළ කොටසට තද කර ඇත සහ එකවර ක්රෝස් අක්ෂයේ මධ්යයේ පිහිටා ඇත:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: flex;
place-content: start 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: flex;
place-content: center end;
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: flex;
place-content: end start;
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;
place-content: start 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;
}
:
උදාහරණය . ග්රිඩයක සිරස් අක්ෂයේ මධ්යය දිගේ සහ තිරස් අක්ෂයේ ආරම්භය දිගේ සම කිරීම
අපගේ මූලද්රව්ය සම කරමු සිරස් අක්ෂයේ මධ්යය දිගේ සහ තිරස් අක්ෂයේ ආරම්භය දිගේ:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
place-content: center 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;
place-content: end 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;
}
:
මෙයද බලන්න
-
align-contentගුණය,
එය ක්රෝස් හෝ සිරස් අක්ෂය දිගේ සම කිරීම නියම කරයි -
justify-contentගුණය,
එය මූලික අක්ෂය දිගේ සම කිරීම නියම කරයි
