如何包装项目以始终在最后一行至少包含 2 个项目？

Question

图片问题

我的客户当然希望以响应式方式在他的网站上列出车辆。但所有已知的技术（flex、grid）都将最后一个项目包装到下一行。

我尝试用图片做什么

但对于英雄来说，这是极其丑陋的。客户想要：

• 每行最多 5 项
• 每行至少 2 项

棘手的部分是项目的数量必须动态。通常在 4 至 6 辆车之间

我知道我可以像这样选择最后两项

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

但我不能强迫它们换行。有什么想法吗？

Answer 1

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

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