Bagaimana Menjajarkan Baris Terakhir ke Kiri dalam Bekas Flexbox Berbilang Baris?

Cara Menjajarkan Kiri Baris Terakhir bagi Bekas Flexbox Berbilang Baris

Susun atur Flexbox menyediakan kaedah yang berkuasa untuk menyusun kandungan ke dalam baris dan lajur . Walau bagaimanapun, apabila bekerja dengan reka letak berbilang baris, memastikan baris terakhir dijajar ke kiri boleh menimbulkan cabaran.

Masalahnya:

Pertimbangkan reka letak seperti grid imej, di mana kami ingin mengagihkan item secara sama rata menggunakan flexbox. Secara lalai, sifat justify-content: space-around akan memusatkan item dalam baris terakhir jika ia mengandungi kurang elemen daripada baris lain. Ini memecahkan kesan grid yang dimaksudkan.

Penyelesaian:

Untuk menjajarkan baris terakhir ke kiri, kami boleh memperkenalkan elemen "ruang kosong" yang runtuh secara menegak dan menduduki ruang dalam bekas.

Langkah:

1. Buat elemen ruang kosong: Tambah elemen div pada HTML dengan kelas "filling- kosong-ruang-kanak-kanak".
2. Gayakan elemen ruang kosong: Gunakan peraturan CSS berikut:

<code class="css">.filling-empty-space-childs {
    width: [image width];
    height: 0;
}</code>

3. Tetapkan sifat flexbox: Pastikan bekas mempunyai sifat berikut:

<code class="css">display: flex;
flex-wrap: wrap;
justify-content: space-around;</code>

Cara ia Berfungsi:

Elemen ruang kosong akan runtuh secara menegak kerana ketinggian mereka adalah sifar. Apabila baris terakhir mempunyai kurang elemen berbanding baris lain, elemen ruang kosong ini akan menduduki ruang yang tinggal, menjajarkan kiri item dalam baris terakhir dengan berkesan.

Atas ialah kandungan terperinci Bagaimana Menjajarkan Baris Terakhir ke Kiri dalam Bekas Flexbox Berbilang Baris?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!