Bagaimana untuk Menjajarkan Item Flex dengan Sempurna pada Baris Terakhir dengan Lebar Tidak Dapat Diramalkan?

Cara Menyaiz dan Menjajarkan Item Flex dengan Sempurna pada Baris Terakhir

Apabila bekerja dengan senarai item flex, anda mungkin menghadapi ketidakkonsistenan dalam penjajaran tepi kanan, terutamanya apabila lebar item tidak dapat diramalkan atau dinamik. Walaupun lebar tetap atau teknik paparan: jadual mungkin tidak menghasilkan hasil yang memuaskan, pertimbangkan pendekatan berikut menggunakan flexbox untuk saiz dan kawalan penjajaran yang tepat:

Penyelesaian menggunakan Flexbox:

1. Tetapkan bekas induk untuk dipaparkan: flex; dan flex-wrap: bungkus; untuk membenarkan berbilang baris.
2. Gunakan flex: 1 0 auto; kepada item fleksibel untuk menjadikannya fleksibel dan mengecut mengikut keperluan.

Walau bagaimanapun, jika ini mengakibatkan baris terakhir regangan terlalu lebar, anda boleh melaksanakan penyelesaian berikut:

Helah Item Hantu:

Untuk mencapai tingkah laku seperti menjajarkan justify, pertimbangkan untuk mencipta "phantom" item fleksibel yang sentiasa menduduki slot terakhir. Ini boleh dilakukan dengan menambahkan kod berikut pada bekas induk:

.parent-container:after {
    content: '';
    flex: 10 0 auto;
}

Item hantu ini akan melaraskan lebarnya secara automatik untuk mengisi ruang yang tinggal pada baris terakhir, memastikan item flex sebenar mengekalkan semula jadinya. lebar.

Contoh Pelaksanaan:

Dalam contoh yang diberikan, anda boleh melaksanakan penyelesaian seperti berikut:

.userlist {
    display: flex;
    flex-wrap: wrap;
}

.userlist:after {
    content: '';
    flex: 10 0 auto;
}

Ini akan mencipta satu item hantu yang akan sentiasa menduduki slot terakhir dalam bekas .userlist, menghasilkan jarak dan penjajaran yang diingini.

Atas ialah kandungan terperinci Bagaimana untuk Menjajarkan Item Flex dengan Sempurna pada Baris Terakhir dengan Lebar Tidak Dapat Diramalkan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!