Bagaimanakah Saya Boleh Mencapai Item Flex Lebar Sama Merentas Baris, Walaupun Semasa Membungkus?

Item Flex Lebar Sama Dalam Bekas Bersaiz Boleh Ubah

Flexbox membenarkan susun atur yang fleksibel dan responsif, tetapi ia boleh menghadapi cabaran apabila cuba mengekalkan lebar yang sama antara item flex selepas senarai wraps.

Penghadan Flexbox Semasa

Dalam spesifikasi semasanya, Flexbox tidak mempunyai penyelesaian asli untuk penjajaran lebar yang sama pada baris terakhir. Ini disebabkan oleh fakta bahawa item fleksibel bersaiz berdasarkan ruang yang tersedia dan baris terakhir mungkin mempunyai lebih sedikit ruang yang tinggal.

Penyelesaian Alternatif: Reka Letak Grid

Grid Reka letak, satu lagi teknik susun atur CSS, menawarkan penyelesaian yang lebih mantap untuk isu penjajaran ini. Grid membenarkan saiz eksplisit dan kedudukan elemen dalam bekas:

Kod CSS

.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

• Sifat grid-template-columns mentakrifkan saiz dan bilangan lajur dalam grid (sebanyak yang sesuai bekas, setiap satu dengan lebar minimum 100px dan unit 1fr yang fleksibel).
• Sifat baris-auto-grid menetapkan ketinggian baris (20px dalam kes ini).
• grid -gap menentukan ruang antara item.

Konfigurasi ini mengagihkan lebar yang tersedia secara sama rata antara item fleksibel, membolehkan mereka membungkus dan mengekalkan saiz yang sama walaupun pada baris terakhir.

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