Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana Menjajarkan Baris Terakhir dalam Susun Atur Flexbox Berbilang Baris?

Bagaimana Menjajarkan Baris Terakhir dalam Susun Atur Flexbox Berbilang Baris?

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-11-03 19:02:29518semak imbas

How to Left-Align the Last Line in a Multi-Line Flexbox Layout?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn