Bagaimanakah Saya Boleh Menghalang Regangan Baris Terakhir dalam Reka Letak Flexbox?

Saiz dan Penjajaran yang Betul bagi Item Fleksi Baris Terakhir

Dalam senario di mana elemen blok sebaris yang mengandungi nama pengguna dan yang berkaitan nombor dipaparkan dengan tepi kanan yang tidak konsisten, objektifnya adalah untuk mencapai penjajaran justifikasi yang konsisten dan dinamik tingkah laku.

Flexbox menawarkan penyelesaian kepada isu penjajaran ini. Dengan menggunakan paparan: flex; flex-wrap: bungkus; ke bekas dan lentur: 1 0 auto; kepada elemen, anda boleh mencapai hasil yang memuaskan. Walau bagaimanapun, barisan elemen terakhir masih terbentang secara luar biasa.

Untuk menyelesaikan cabaran ini dan mengelakkan regangan yang tidak diingini, teknik menggunakan item "hantu" boleh digunakan. Dengan mencipta 3 atau 4 item "hantu" halimunan yang sentiasa menduduki slot terakhir, lebar semula jadi elemen baris terakhir dikekalkan.

Sebagai alternatif, anda boleh menggunakan satu item "hantu" dengan keterlihatan: tersembunyi dan flex-grow: 10. Menyasarkan item ini dengan :last-child atau :last-of-type pseudo-class memastikan ia sentiasa menempati kedudukan terakhir.

Teknik ini secara berkesan mencapai tingkah laku seperti menjajarkan justify, membenarkan elemen mengisi lebar bekas tanpa regangan berlebihan pada baris terakhir, menghasilkan reka letak yang menarik secara visual.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menghalang Regangan Baris Terakhir dalam Reka Letak Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!