图片问题
我的客户当然希望以响应式方式在他的网站上列出车辆。但所有已知的技术（flex、grid）都将最后一个项目包装到下一行。
我尝试用图片做什么
但对于英雄来说，这是极其丑陋的。客户想要：
棘手的部分是项目的数量必须动态。通常在 4 至 6 辆车之间
我知道我可以像这样选择最后两项
.item:nth-last-child(-n+2) {
order: 2; /* set order to 2 for the last two items */
}
但我不能强迫它们换行。有什么想法吗？
原来我必须事先获取项目的数量，并将类注入到列表中来控制显示
<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; } } }