Bagaimana Saya Boleh Memastikan Item Flex Lebar Sama Walaupun Selepas Membungkus?

Item Fleksibel Lebar Sama Walaupun Selepas Dibalut

Flexbox menawarkan cara yang berkuasa untuk mencipta reka letak yang fleksibel, tetapi ia tidak selalunya mudah untuk mencapai keperluan penjajaran tertentu. Satu cabaran biasa ialah memastikan lebar yang sama untuk item flex, walaupun selepas ia membalut ke baris baharu.

Masalahnya

Pertimbangkan senario di mana anda mempunyai senarai item dengan panjang kandungan yang berbeza-beza. Anda mahu mereka meregang sama rata untuk mengisi lebar bekas sambil mengekalkan lebar minimum dan membalut ke garisan baharu seperti yang diperlukan. Walau bagaimanapun, dengan menggunakan flexbox sahaja, item pada baris terakhir mungkin tidak sejajar.

Pendekatan Flexbox Asal

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  min-width: 100px;
  flex-grow: 1;
}

Pendekatan ini akan mengagihkan ruang yang tersedia antara item, tetapi ia tidak pastikan lebar yang sama untuk baris terakhir.

Susun Letak Grid Penyelesaian

Nasib baik, CSS Grid Layout menyediakan penyelesaian kepada masalah ini. Tata Letak Grid menggunakan mekanisme susun atur yang lebih jelas, menjadikannya lebih mudah diramal. Menggunakan Reka Letak Grid pada contoh di atas menyelesaikan isu penjajaran.

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

Coretan kod yang dikemas kini ini menggunakan sifat grid-template-columns untuk menentukan lajur dalam grid. Fungsi repeat(auto-fit, ...) memperuntukkan lajur secara automatik agar sesuai dengan kandungan, memastikan semua item mempunyai lebar yang sama.

Kesimpulan

Walaupun flexbox ialah alat susun atur serba boleh, ia adalah tidak sesuai untuk situasi di mana anda memerlukan penjajaran item yang tepat. Dalam kes di mana item flex lebar yang sama diingini, Tata Letak Grid menawarkan penyelesaian yang lebih mudah dan boleh diramal.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Memastikan Item Flex Lebar Sama Walaupun Selepas Membungkus?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!