Bagaimana Saya Boleh Memastikan Lebar Item Konsisten dalam Flexbox Selepas Balutan?

Ketekalan Lebar Item Selepas Balutan Flexbox

Pengenalan:
Dalam CSS, susun atur flexbox menyediakan kefleksibelan untuk mengatur elemen dengan memberikan saiz dinamiknya dan keupayaan membalut. Walau bagaimanapun, satu isu biasa ialah memastikan lebar item yang sama selepas pembungkusan berlaku.

Masalahnya:
Apabila menggunakan flexbox, anda boleh membuat reka letak yang item mempunyai lebar minimum dan boleh berkembang untuk mengisi ruang yang ada. Walau bagaimanapun, apabila item dibalut pada berbilang baris, item baris terakhir mungkin mempunyai lebar yang tidak sekata, mengakibatkan penampilan yang tidak diingini.

Penyelesaian CSS Sahaja:
Malangnya, CSS tulen tidak kini menawarkan penyelesaian yang bersih untuk menjajarkan item fleksibel dalam baris terakhir. Ia di luar skop spesifikasi flexbox.

Pendekatan Alternatif: Reka Letak Grid CSS
Susun atur grid, satu lagi teknologi CSS3, menyediakan penyelesaian untuk masalah ini. Grid membenarkan kawalan yang lebih tepat ke atas peletakan item dan boleh memastikan lebar item yang sama pada baris terakhir:

Kod:

.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;
}

Penjelasan:

• paparan: grid menetapkan elemen bekas untuk menggunakan grid reka letak.
• grid-template-columns mentakrifkan lajur dalam grid, dengan auto muat membuat seberapa banyak lajur yang diperlukan dan minmax() menetapkan lebar minimum dan maksimum untuk setiap lajur.
• grid-auto-rows menentukan ketinggian baris, dalam kes ini, 20px.
• grid-gap menambah sedikit ruang antara item grid.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Memastikan Lebar Item Konsisten dalam Flexbox Selepas Balutan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!