Mengapa Item Flex Menjajarkan Tengah Daripada Kiri Apabila Balutan Berlaku, dan Bagaimana untuk Membetulkannya?

Item Fleksibel: Menjajarkan Kiri Daripada Tengah pada Balut

Dalam senario ini, anda menyasarkan untuk memaparkan ikon media sosial dalam baris tiga menggunakan elemen ul berasaskan flex dalam menu mudah alih. Penjajaran yang diingini adalah bersebelahan dengan jarak yang sama. Walaupun anda telah mencapai kedudukan sebelah menyebelah, isu timbul apabila ikon tambahan ditambahkan, menyebabkan baris seterusnya dijajarkan dari tengah dan bukannya kiri.

Penyelesaian:

Untuk membetulkan isu penjajaran ini, gantikan justify-content: space-around rule dengan justify-content: space-antara.

Penjelasan:

Mengikut spesifikasi flexbox, justify-content: space-around mengedarkan item flex secara sama rata di sepanjang garisan dengan ruang separuh saiz pada kedua-dua hujungnya. Walau bagaimanapun, apabila terdapat hanya satu item fleksibel atau ruang sisa negatif, ia berkelakuan sama dengan tengah, menghasilkan gelagat yang diingini hanya apabila terdapat tiga item dalam kedua-dua baris.

Sebaliknya, justify-content: space -antara mengagihkan item flex secara sama rata tanpa menambah sebarang ruang hujung tambahan. Apabila terdapat hanya satu item lentur atau ruang sisa negatif, ia lalai untuk mula lentur, menjajarkan item lentur dari kiri.

Dengan menggunakan ruang antara, item lentur anda akan sentiasa sejajar ke kiri, memastikan tingkah laku yang diingini untuk baris tunggal dan baris berbalut.

Atas ialah kandungan terperinci Mengapa Item Flex Menjajarkan Tengah Daripada Kiri Apabila Balutan Berlaku, dan Bagaimana untuk Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!