Bagaimanakah Saya Boleh Mewajarkan Item Flexbox di Baris Terakhir kepada Lebar Aslinya?

Mencapai Penjajaran Wajar dengan Flexbox untuk Item Baris Terakhir Dinamik

Dalam senario ini, matlamatnya adalah untuk memastikan item flex pada yang terakhir barisan bekas secara semula jadi dijajarkan dengan lebar kandungannya, sambil menghormati ruang bekas yang tersedia. Ini bercanggah dengan tingkah laku sedia ada flexbox untuk meregangkan item flex untuk mengisi keseluruhan baris.

Mencuba Justifikasi Flexbox

Percubaan awal untuk menggunakan flexbox dengan paparan: flex; dan flex-wrap: bungkus; mencapai hasil yang baik sehingga mencapai baris terakhir, di mana semua item flex meregangkan agar sesuai dengan lebar bekas. Kesan ini tidak diingini, terutamanya apabila hanya satu atau dua item kekal pada baris terakhir.

Penyelesaian: Phantom Items dan Flex-Grow

Penyelesaian melibatkan pengenalan "phantom " item yang menduduki baris terakhir secara berterusan, pada asasnya berfungsi sebagai ruang letak untuk mengisi lebihan ruang dan menghalang item yang tinggal daripada terlalu regangan. Untuk melaksanakan pendekatan ini:

1. Selepas item flex sebenar terakhir dalam bekas, tambahkan 3-4 item hantu dengan dimensi dan keterlihatan yang sama: tersembunyi.
2. Sebagai alternatif, buat satu hantu item dengan keterlihatan: tersembunyi dan flex-grow: 10. Gunakan :last-child atau :last-of-type pseudo-class untuk menyasarkan elemen ini secara khusus.

Pelaksanaan Praktikal

Sebagai contoh, jika pengguna #82 ialah item terakhir yang kelihatan dalam bekas:

• Tambah pengguna hantu #83, #84 dan #85 dengan keterlihatan: tersembunyi.
• Atau, tambahkan satu item hantu dengan keterlihatan: tersembunyi dan flex-grow: 10, disasarkan sebagai :anak terakhir.

Hasil

Pendekatan ini menghasilkan baris terakhir item flex yang menjajarkan secara semula jadi dengan lebar kandungannya, menghapuskan regangan berlebihan diperhatikan sebelum ini. Ruang bekas diisi dengan berkesan tanpa mengorbankan tingkah laku penjajaran yang diingini.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mewajarkan Item Flexbox di Baris Terakhir kepada Lebar Aslinya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!