Bagaimanakah Saya Boleh Mencapai Item Flex Lebar Sama Merentas Berbilang Baris?

Mengekalkan Item Flex Lebar Sama Semasa Pembalut

Dalam CSS, mencapai reka letak di mana item flex mengekalkan lebar yang sama, walaupun selepas membalut ke baris baharu , boleh mencabar.

Menggunakan Flexbox

Dengan flexbox, walaupun mungkin untuk mengkonfigurasi item untuk berkembang secara dinamik untuk mengisi lebar bekas, tiada ciri terbina dalam untuk memastikan lebar yang sama untuk semua item, terutamanya dalam baris terakhir. Had ini berpunca daripada skop semasa spesifikasi flexbox.

Pendekatan Alternatif: Tata Letak Grid

Reka Letak Grid, satu lagi teknologi CSS3, menyediakan penyelesaian yang lebih fleksibel untuk terakhir- penjajaran baris. Dengan menggunakan sifat grid-template-columns, adalah mungkin untuk mengagihkan item secara sama rata, walaupun apabila ia membalut ke beberapa baris.

Pelaksanaan

Untuk mencapai reka letak yang diingini :

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

Kod ini mencipta grid dengan pengedaran lajur automatik berdasarkan lebar yang tersedia. Setiap lajur boleh mengandungi satu atau lebih item fleksibel dengan lebar minimum 100px dan lebar fleksibel yang berkembang untuk mengisi ruang yang tinggal dalam lajur. Sifat grid-auto-rows menetapkan ketinggian setiap baris kepada 20px dan grid-gap menambah 5px jarak antara item.

Kesimpulan

Sementara flexbox ialah alat susun atur yang berkuasa, had semasanya menjadikan penjajaran lebar yang sama dalam baris terakhir mencabar. Tata Letak Grid, dengan keupayaannya yang lebih maju, menyediakan penyelesaian yang boleh dipercayai untuk senario ini.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencapai Item Flex Lebar Sama Merentas Berbilang Baris?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!