Bagaimanakah Flexbox Boleh Mencapai Penjajaran Wajar untuk Elemen Lebar Pembolehubah pada Baris Terakhir?

Menguasai Flexbox: Mencapai Penjajaran Wajar untuk Elemen Lebar Boleh Ubah

Dalam bidang reka bentuk web, selalunya wajar untuk menyelaraskan elemen dalam cara yang mengoptimumkan ruang dan mencipta susun atur yang menyenangkan secara visual. Flexbox telah muncul sebagai alat yang berkuasa untuk mencapai objektif ini, tetapi senario tertentu boleh memberikan cabaran yang unik.

Satu cabaran sedemikian timbul apabila berurusan dengan item lebar berubah-ubah yang disusun dalam bekas yang fleksibel. Pertimbangkan senarai pengguna, masing-masing dengan nama dan nombor yang berkaitan. Apabila dibalut menggunakan flexbox, unsur-unsur ini mungkin memanjang untuk mengisi keseluruhan lebar bekas, mewujudkan jurang yang tidak sedap dipandang pada baris terakhir.

Tingkah laku yang diingini ialah menjajarkan elemen pada baris terakhir menggunakan lebar semula jadinya, manakala memastikan bahawa elemen pada semua baris lain menggunakan sepenuhnya lebar bekas. Untuk mencapai matlamat ini, teknik yang melibatkan item hantu boleh digunakan.

Penyelesaian: Item Hantu

Kunci untuk menyelesaikan isu penjajaran ini adalah dengan memperkenalkan item hantu yang menduduki slot terakhir pada baris terakhir. Item ini dijadikan halimunan menggunakan keterlihatan: tersembunyi, manakala sifat flex-grownya memastikan ia mengisi ruang yang tinggal pada baris.

Pelaksanaan

Untuk melaksanakan penyelesaian ini , seseorang boleh menambahkan item hantu pada hujung bekas. Sebagai contoh, mempertimbangkan senarai 82 pengguna, tiga item hantu boleh dibuat dengan CSS berikut:

.userlist:after {
    content: "";
    flex: 10 0 auto;
    visibility: hidden;
}

Pendekatan alternatif melibatkan mencipta satu item hantu dengan flex-grow: 10 dan menyasarkannya menggunakan : anak terakhir atau :kelas pseudo jenis terakhir.

Atas ialah kandungan terperinci Bagaimanakah Flexbox Boleh Mencapai Penjajaran Wajar untuk Elemen Lebar Pembolehubah pada Baris Terakhir?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!