Bagaimanakah Saya Boleh Mencapai Item Fleksibel Sama Lebar Walaupun Selepas Dibungkus?

Item Fleksibel Lebar Sama Walaupun Selepas Dibalut

Dalam domain penentududukan CSS, mencapai lebar yang sama untuk item fleksibel walaupun selepas dibalut boleh memberikan cabaran. Flexbox, modul reka letak yang berkuasa, gagal menyediakan penyelesaian asli untuk senario ini.

Pelaksanaan flexbox semasa tidak mempunyai keupayaan untuk menjajarkan item fleksibel secara sama rata dalam baris atau lajur terakhir. Had ini wujud dalam spesifikasi semasa dan masih tidak dapat diselesaikan.

Untuk analisis yang lebih mendalam dan pendekatan alternatif untuk menangani isu ini, rujuk sumber yang berkaitan ini:

• [Sizing flex item pada yang terakhir row](https://stackoverflow.com/questions/34259120/sizing-flex-items-on-the-last-row)
• [Adakah mungkin item flex dijajarkan rapat dengan item di atas mereka?](https://css-tricks.com/flexbox-tightly-align-last-row/)

Walau bagaimanapun, di luar flexbox, CSS Grid Layout menawarkan penyelesaian yang mudah untuk masalah ini :

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-auto-rows: 20px;
  grid-gap: 5px;
}

.item {
  background: yellow;
  text-align: center;
  border: 1px solid red;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

Dengan penyelesaian Grid CSS ini, anda boleh menyelaraskan item fleksibel dengan mudah lebar, walaupun apabila ia membalut pada berbilang baris.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencapai Item Fleksibel Sama Lebar Walaupun Selepas Dibungkus?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!