Bagaimana untuk Menjajarkan Item Flex ke Kiri Apabila Membungkus?

Cara Menjajarkan Item Fleksibel Semasa Membungkus

Masalah:

Menu mudah alih memaparkan ikon media sosial dalam baris tiga, disusun secara mendatar dengan jarak yang sama. Walau bagaimanapun, apabila lebih daripada tiga item hadir, baris berikutnya mula diisi dari tengah. Matlamatnya adalah untuk menjajarkan item senarai ke kiri dalam setiap baris tanpa mengganggu jarak yang sama.

Penyelesaian:

Gantikan justify-content: space-round property dengan justify-content: space-between.

Penjelasan:

Dalam CSS Flexbox, sifat justify-content menjajarkan item secara mendatar di sepanjang paksi utama. ruang sekeliling mengagihkan item secara sama rata dengan ruang separuh saiz di kedua-dua hujungnya. Walau bagaimanapun, apabila terdapat ruang terhad atau hanya satu item pada baris, ia bertindak seperti tengah, menyebabkan item menjadi berpusat.

Sebaliknya, ruang-antara mengagihkan item secara sama rata tanpa ruang separuh saiz di hujung . Apabila terdapat ruang terhad atau hanya satu item, ia berkelakuan seperti flex-start, yang menjajarkan kiri item.

Dengan menggunakan justify-content: space-between, ikon media sosial akan menjajarkan kiri dalam setiap baris, memastikan baris seterusnya diisi dari kiri.

Nota Tambahan:

Apabila menggunakan ruang-antara, padding kiri dan kanan boleh ditambah pada bekas untuk mensimulasikan tingkah laku ruang sekeliling. Walau bagaimanapun, ini mungkin memerlukan pelarasan lanjut untuk menampung penjajaran berbilang item pada setiap baris.

Atas ialah kandungan terperinci Bagaimana untuk Menjajarkan Item Flex ke Kiri Apabila Membungkus?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!