CSS හි නිවැරදි ඉඩ අරමුණු සහිත ටයිල් කිරීම

ගැටළු නොමැතිව ඇත්තටම ක්‍රියාත්මක වන ටයිල් කිරීමක් margin භාවිතයෙන් ඉඩ අරමුණු සමඟ කරමු. අපට මුලින්ම ඉඩ අරමුණු නොමැතිව එවැනි ටයිල් කිරීමක් තිබේය යැයි සිතමු:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
  <div class="child">9</div>
</div>

css.parent {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  border: 1px solid red;
}
.child {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

අපි margin භාවිතයෙන් අංග අතර තිරස් ඉඩ අරමුණු කරමු.

මේ සඳහා සියලු දරු අංග සඳහා margin-right අගය 10px ලෙස සකසමු, සහ සෑම තුන්වන දරුවෙකුටම මෙම margin ශුන්‍ය කරමු. මේ සඳහා අපි nth-child සූචක වර්ගය භාවිතා කරමු, එහි පරාමිතිය සකස් කරන්නේ සෑම තුන්වන අංගයක්ම ලබා ගැනීම සඳහා යෑයි.

අපි දෙමාපියගේ පළල 320px දක්වා ද වැඩි කරමු, ඉඩ අරමුණු සඳහා ඉඩ දීමට, සහ අපි බලමු, අපට ලැබෙන්නේ කුමක්ද යන්න:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
  <div class="child">9</div>
</div>

css.parent {
  display: flex;
  flex-wrap: wrap;
  width: 320px;
  border: 1px solid red;
}
.child {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  margin-right: 10px;
  border: 1px solid green;
}
.child:nth-child(3n) {
  margin-right: 0;
}

Результат:

ඉතින්, සියල්ල ක්‍රියාත්මක වේ. අපි අවසාන අංගය ඉවත් කරමු, එවිට අවසාන පේළියේ අංග අඩු ප්‍රමාණයක් තිබෙන අතර එය සමඟ අපට තහවුරු කර ගනිමු මෙම අවසාන පේළිය සමඟ අපට ගැටළු නොමැති බව:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
</div>

css.parent {
  display: flex;
  flex-wrap: wrap;
  width: 320px;
  border: 1px solid red;
}
.child {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  margin-right: 10px;
  border: 1px solid green;
}
.child:nth-child(3n) {
  margin-right: 0;
}

Результат: