Bagaimana untuk Menjajarkan Baris Terakhir bagi Reka Letak Kotak Flex Berbilang Baris ke Kiri?

Menjajarkan Baris Terakhir bagi Reka Letak Kotak Flex Berbilang Baris

Apabila mencipta bekas dengan elemen yang dibentangkan dalam corak grid menggunakan flexbox, adalah perkara biasa untuk menghadapi isu di mana baris terakhir elemen tidak sejajar dengan yang lain dengan betul. Ini kerana flexbox memusatkan elemen secara lalai apabila garisan tidak mempunyai bilangan elemen yang sama seperti baris lain.

Untuk menyelesaikan isu ini dan menjajarkan baris terakhir ke sebelah kiri, langkah berikut boleh diambil :

1. Buat Div Pengisian Ruang Kosong: Dalam struktur HTML, tambahkan tiga elemen div dengan kelas "filling-empty-space-childs". Tetapkan lebar div ini agar sepadan dengan elemen dalam grid dan tetapkan ketinggian 0. Ketinggian ini akan membolehkan mereka "runtuh" ​​apabila ia jatuh ke baris baharu, memastikan sebarang ruang tambahan diisi.

2. Gaya CSS: Susun elemen flexbox menggunakan CSS dengan sifat berikut:

   • Paparan: Flex: Tetapkan bekas kepada paparkan sebagai kotak flex.
   • Balut Fleksibel: Balut: Benarkan elemen membalut pada baris baharu jika perlu.
   • Kandungan Justify: Space-Around: Agihkan sama rata elemen dalam sel grid.

Dengan melaksanakan langkah ini, baris terakhir elemen akan sentiasa diselaraskan ke sebelah kiri, walaupun ia mengandungi bilangan elemen yang berbeza daripada baris yang lain. Ini memastikan susun atur grid yang konsisten dan teratur.

Atas ialah kandungan terperinci Bagaimana untuk Menjajarkan Baris Terakhir bagi Reka Letak Kotak Flex Berbilang Baris ke Kiri?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!