Bagaimana Menjajarkan Baris Terakhir Grid Flexbox?

Cara Menjajarkan Kiri Baris Terakhir Grid Flexbox

Flexbox ialah modul susun atur berkuasa yang menyediakan cara mudah dan fleksibel untuk mengedarkan elemen pada halaman web. Walau bagaimanapun, apabila menjajarkan item dalam berbilang baris, baris terakhir mungkin tidak sentiasa sejajar seperti yang diharapkan. Isu ini timbul apabila bilangan elemen dalam baris terakhir berbeza daripada baris lain, menyebabkan unsur-unsur berada di tengah.

Untuk menangani cabaran ini, pertimbangkan penyelesaian berikut:

1. Dalam HTML, sertakan beberapa div kosong dengan kelas "mengisi-kosong-ruang-kanak-kanak." Div ini akan berfungsi sebagai ruang letak untuk memastikan baris terakhir memenuhi grid.

<code class="html"><div class="item"></div>
<div class="item"></div>
...
<div class="item"></div>
<div class="filling-empty-space-childs"></div>
<div class="filling-empty-space-childs"></div>
<div class="filling-empty-space-childs"></div></code>

2. Gayakan div "mengisi-kosong-ruang-kanak-kanak" dengan ketinggian sifar. Ini memastikan ia runtuh dalam baris baharu, membenarkan baris terakhir dijajar ke kiri.

<code class="css">.filling-empty-space-childs {
    width: 205px; /* Adjust to match the width of grid items */
    height: 0;
}</code>

Dengan melaksanakan penyelesaian ini, baris terakhir grid flexbox akan sentiasa menjajar ke kiri, mengekalkan integriti grid, tanpa mengira bilangan elemen yang terkandung di dalamnya.

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