Bagaimana untuk membungkus item untuk sentiasa mempunyai sekurang-kurangnya 2 item pada baris terakhir?

Question

Soalan Imej Pelanggan saya sudah tentu ingin menyenaraikan kenderaan di laman webnya dengan cara yang responsif. Tetapi semua teknik yang diketahui (flex, grid) membalut item terakhir ke baris seterusnya. Apa yang saya cuba lakukan dengan gambar-gambar itu tetapi bagi hero, ianya amat hodoh. Pelanggan mahu: Maksimum 5 item setiap baris Minimum 2 item setiap baris Bahagian yang sukar ialah bilangan item mestilah dinamik. Biasanya antara 4 dan 6 kereta saya tahu saya boleh memilih dua item terakhir seperti ini.item:nth-last-child(-n+2){order:2;/*setorderto2forthe

P粉147045274 · Answer

Ternyata saya perlu mendapatkan bilangan item terlebih dahulu dan menyuntik kelas ke dalam senarai untuk mengawal paparan

...

.SENARIO_4_ITEMS {
    .container {
        width: 268px;
    }
    @media #{$larger-down} {
        a {
            flex-basis: 50%;
            display: flex;
            justify-content: center;
            .container {
                width: 268px;                   
            }
        }
    }
} 
.SENARIO_5_ITEMS {
    .container {
        width: 270px;
    }
    @media #{$xxlarge-down} {
        a {
            flex-basis: 33%;
            display: flex;
            justify-content: center;
            .container {
                width: 300px;                   
            }
        }
    }
}
.SENARIO_6_ITEMS {
    a {
        flex-basis: 33%;
        display: flex;
        justify-content: center;
        .container {
            width: 300px;                   
        }
    }
    @media #{$xxlarge-down} {
        .container {
            width: 300px;                   
        }
    }
}