Bagaimana untuk Mengelakkan Pemusatan Item Flex Terakhir Apabila Menggunakan Flexbox Wrap?

Cara Menukar Balutan Flexbox

Dalam senario flexbox responsif ini, item flex dibalut secara beransur-ansur apabila saiz skrin mengecil. Untuk memperhalusi gelagat pembalut, kami akan meneroka cara mengekalkan item flex terakhir tidak berpusat, bermula dari kiri:

Melaksanakan Elemen Hantu:

CSS boleh digunakan untuk mencipta elemen "hantu" untuk menduduki ruang yang tinggal pada baris terakhir. Sebagai contoh, dengan mengandaikan panjang lajur berpotensi 4, kami memerlukan 3 elemen hantu:

.card:empty {
    width: 300px;
    box-shadow: none;
    margin: 2rem;
    padding-bottom: 0;
}

Elemen Pseudo:

Elemen pseudo juga boleh digunakan, mengurangkan bilangan unsur hantu yang diperlukan oleh 2:

::after {
    content: "";
    flex: 1;
}

Contoh Disunting:

Berikut ialah versi kod yang dikemas kini dengan elemen hantu ini ditambah:

<div class="card"></div>
<div class="card"></div>
<div class="card"></div>

Dengan ini peningkatan, item flex akan dibalut seperti yang dikehendaki, dengan 2 item terakhir tidak berpusat dan bermula dari kiri.

Atas ialah kandungan terperinci Bagaimana untuk Mengelakkan Pemusatan Item Flex Terakhir Apabila Menggunakan Flexbox Wrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!