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

Question

Soalan bergambar

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

Tetapi bagi seorang wira, ini amat hodoh. Pelanggan mahu:

• Maksimum 5 item setiap baris
• Sekurang-kurangnya 2 item setiap baris

Bahagian yang sukar ialah bilangan item mestilah dinamik. Biasanya antara 4 hingga 6 kereta

Saya tahu saya boleh memilih dua item terakhir seperti ini

.item:nth-last-child(-n+2) {
  order: 2; /* set order to 2 for the last two items */
}

Tetapi saya tidak boleh memaksa mereka untuk membalut. Ada idea?

Answer 1

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

<ul class="{{ 'SENARIO_' + numberOfItem + '_ITEMS' }}">

...

.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;                   
        }
    }
}