Mengapa Item Bekas Flex Dijajarkan Di Tengah Daripada Dijajarkan Kiri Apabila Menggunakan `justify-content: space-around`?

Penjajaran Item Bekas Fleksibel Di Kiri

Dalam menu mudah alih, senarai ikon media sosial disusun menggunakan flexbox. Untuk memastikan jarak yang sama, justify-content: space-round digunakan. Walau bagaimanapun, apabila baris mengandungi lebih daripada tiga item, baris itu dijajarkan ke tengah dan bukannya penjajaran kiri.

Kuanyar

Isu timbul kerana justify-content: space- mengelilingi sama rata mengedarkan item dengan ruang separuh saiz pada setiap hujung. Apabila ruang yang tinggal negatif atau satu item wujud, ia berkelakuan seperti pusat. Ini mengakibatkan gelagat penjajaran tengah yang tidak diingini dalam senario yang diberikan.

Penyelesaian

Untuk menjajarkan item yang ditinggalkan pada bungkus, justify-content: space-antara ialah jawab. Variasi ini memastikan pengedaran sekata, tetapi dalam kes ruang kosong negatif atau satu item dalam baris, ia berkelakuan seperti flex-start, yang menjajarkan kiri item.

Kod Contoh

Menggantikan justify-content: space-round dengan justify-content: space-between menangani isu penjajaran. Selain itu, pelapik kiri dan kanan boleh ditambah pada bekas untuk meniru kesan jarak ruang sekeliling.

Pertimbangan Lanjut

Cabaran yang mungkin timbul ialah apabila dua item balut dan selaraskan pada hujung bertentangan bekas. Walau bagaimanapun, menyelesaikan perkara ini adalah perkara yang berasingan sama sekali.

Atas ialah kandungan terperinci Mengapa Item Bekas Flex Dijajarkan Di Tengah Daripada Dijajarkan Kiri Apabila Menggunakan `justify-content: space-around`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!