Bagaimana Menjajarkan Baris Terakhir dalam Susun Atur Flexbox Berbilang Baris?

Barisan Terakhir Menjajarkan Kiri dalam Flexbox Berbilang Baris

Dalam susun atur flexbox, menjajarkan baris terakhir ke sebelah kiri boleh memberikan cabaran apabila baris terakhir tidak mengandungi bilangan elemen yang sama dengan baris lain. Penyelewengan ini mengganggu kesan grid yang diingini.

Untuk menyelesaikan isu ini, kami boleh menggunakan teknik menggunakan div "mengisi-kosong-ruang-kanak-kanak". Div ini mempunyai ketinggian sifar, membenarkannya runtuh ke baris baharu tanpa menjejaskan reka letak.

Pertimbangkan kod HTML berikut:

<code class="html"><div class="container">

    <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>

</div></code>

Dan CSS yang sepadan:

<code class="css">.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

.container .item { width: 130px; height: 180px; background: red; margin: 0 1% 24px; }

.filling-empty-space-childs {
    width: 130px; /*match the width of the items*/
    height: 0;
}</code>

Dalam penyelesaian ini, div "mengisi-kosong-ruang-kanak-kanak" menduduki ruang yang tinggal di baris terakhir. Jika baris terakhir mempunyai empat elemen, div ini akan runtuh menjadi baris baharu, tidak kelihatan dan tidak menduduki ruang. Walau bagaimanapun, jika terdapat kurang daripada empat elemen, div tambahan "mengisi-kosong-ruang-kanak-kanak" akan menjajarkan elemen terakhir ke sebelah kiri, mengekalkan kesan grid.

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