Cara Menjajarkan Item Flex ke Kiri pada Balutan: Menyelesaikan Isu Pemusatan dengan `justify-content: space-between`?

Penjajaran Item Fleksibel pada Balutan: Dari Tengah ke Kiri

Apabila mereka bentuk reka letak responsif menggunakan flexbox, ia selalunya dikehendaki untuk menjajarkan item flex secara mendatar. Walau bagaimanapun, apabila kandungan dibalut ke baris baharu, baris seterusnya mungkin mula diisi dari tengah dan bukannya kiri. Isu ini boleh diselesaikan dengan menggunakan sifat flexbox yang sesuai.

Penyelesaian

Penyelesaian untuk menghalang item flex daripada menjajarkan secara berpusat pada balut ialah menggantikan justify-content: space-around rule dengan justify -kandungan: ruang-antara.

Penjelasan

Mengikut spesifikasi flexbox, justify-content: ruang-keliling mengedarkan item flex secara sama rata di sepanjang paksi utama dengan ruang separuh saiz pada kedua-dua hujungnya. Walau bagaimanapun, jika ruang tidak mencukupi atau hanya satu item, ia berkelakuan seperti tengah.

Sebaliknya, justify-content: ruang-antara mengagihkan item flex secara sama rata dengan ruang yang sama di antara mereka. Apabila ruang tidak mencukupi atau hanya satu item, ia bertindak seperti flex-start, yang memulakan item flex dari kiri.

Dengan menggunakan ruang-antara, anda memaksa item flex untuk menjajarkan dari kiri, tanpa mengira daripada bilangan item pada baris.

Penambahan

Menggunakan ruang-antara boleh meninggalkan ruang di sebelah kanan bekas. Jika anda lebih suka kesan ruang sekeliling, anda boleh menambah pelapik pada bahagian kiri dan kanan bekas untuk mensimulasikannya.

Walau bagaimanapun, menjajarkan item apabila dua balut pada baris baharu menimbulkan cabaran berasingan yang memerlukan lebih lanjut siasatan.

Atas ialah kandungan terperinci Cara Menjajarkan Item Flex ke Kiri pada Balutan: Menyelesaikan Isu Pemusatan dengan `justify-content: space-between`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!