Wie verpacke ich Elemente so, dass in der letzten Zeile immer mindestens zwei Elemente vorhanden sind?

Question

Bildfrage: Mein Kunde möchte natürlich Fahrzeuge responsiv auf seiner Website einstellen. Aber alle bekannten Techniken (Flex, Grid) wickeln das letzte Element in die nächste Zeile ein. Was ich mit den Bildern versucht habe, aber für den Helden ist es extrem hässlich. Der Kunde möchte: Maximal 5 Elemente pro Zeile. Mindestens 2 Elemente pro Zeile. Der schwierige Teil besteht darin, dass die Anzahl der Elemente dynamisch sein muss. Normalerweise zwischen 4 und 6 Autos. Ich weiß, dass ich die letzten beiden Elemente so auswählen kann.item:nth-last-child(-n+2){order:2;/*setorderto2forthe

P粉147045274 · Answer

原来我必须事先获取项目的数量，并将类注入到列表中来控制显示

...

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