Bagaimanakah Saya Boleh Mengawal Pembalut Flexbox Ganjil pada Baris Terakhir?

Cara Mengawal Gelagat Pembalut Flexbox

Masalahnya

Apabila membuat susun atur flexbox responsif, anda mungkin menghadapi keadaan di mana beberapa item terakhir membalut secara aneh, meninggalkan jumlah ruang yang berlebihan pada baris sebelumnya. Contohnya, dalam grid kad yang memaparkan secara dinamik berdasarkan panggilan API, anda mahu dua kad terakhir dibalut dari sebelah kiri, memastikan ia sejajar dengan yang sebelumnya dan bukannya berpusat.

Penyelesaian

Anda boleh mengubah suai gelagat pembalut flexbox melalui CSS untuk mencapai penjajaran yang diingini. Dua pendekatan biasa termasuk:

Menggunakan Elemen 'Ghost'

Buat elemen 'hantu' tanpa kandungan yang boleh dilihat. Elemen ini mengisi baris terakhir dengan berkesan, menolak kad berikutnya ke baris seterusnya. Bilangan elemen 'hantu' sepadan dengan panjang lajur yang dimaksudkan.

Sebagai contoh, untuk panjang lajur berpotensi 4, anda memerlukan 3 elemen 'hantu'. Menggunakan CSS:

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

Menggunakan ::after Pseudo-Element

Sebagai alternatif, gunakan CSS pseudo-element ::after. Pendekatan ini mengurangkan bilangan elemen 'hantu' yang diperlukan.

.card::after {
    content: "";
    width: 100%;
    height: 100%;
    background-color: transparent;
}

Unsur pseudo ini bertindak sebagai pemegang tempat, mengisi ruang yang tinggal pada baris terakhir.

Dengan melaksanakan salah satu daripada teknik ini, anda boleh melaraskan gelagat pembalut reka letak kotak flex anda, memastikan item terakhir diselaraskan dengan sewajarnya, tanpa mengira saiz skrin atau bilangan kad yang diberikan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengawal Pembalut Flexbox Ganjil pada Baris Terakhir?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!