Bagaimana untuk Mewajarkan Lebar Item Flex pada Baris Terakhir Tanpa Regangan?

Mewajarkan Lebar Item Fleksibel pada Baris Terakhir

Cabaran timbul apabila cuba mengagihkan elemen secara sama rata ke seluruh bekas, kecuali baris terakhir . Hanya menjajarkan elemen menggunakan penjajaran teks: justify tidak mencukupi, kerana tiada ruang antara elemen. Flexbox menyediakan penyelesaian, tetapi gelagat lalai meregangkan elemen baris terakhir merentasi lebar penuh.

Untuk mencapai gelagat seperti menjajarkan justify, apabila elemen menggunakan lebar semula jadi pada baris terakhir, gunakan pendekatan berikut:

1. Tambah Item Hantu:
   Buat beberapa item "hantu" yang menduduki slot terakhir bekas. Item ini boleh disembunyikan dengan keterlihatan: tersembunyi.

Contohnya, dengan pengguna #82 sebagai entri terakhir, tambahkan pengguna palsu 83, 84 dan 85 dengan keterlihatan: tersembunyi.

2. Gunakan Item Hantu Tunggal:
   Sebagai alternatif, gunakan satu item hantu di penghujungnya dengan keterlihatan: tersembunyi dan flex-grow: 10. Sasarkan ia menggunakan :last-child atau :last-of-type pseudo-class.

Kaedah ini membenarkan elemen baris terakhir dikekalkan lebar semula jadi mereka sambil mengagihkan ruang yang tinggal secara sama rata pada item hantu.

Atas ialah kandungan terperinci Bagaimana untuk Mewajarkan Lebar Item Flex pada Baris Terakhir Tanpa Regangan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!