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

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

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

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

අගයන්

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

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

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

css#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;
}

Результат:

දැන් අපගේ දැලිස දෝශනිය තුළ බලමු:

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

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

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

css#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;
}

Результат:

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

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

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

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

css#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;
}

Результат:

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

මෙයද බලන්න