提问人：Stélios Filippidis 提问时间：4/13/2023 最后编辑：j08691Stélios Filippidis 更新时间：4/18/2023 访问量：49
如何包装项目以在最后一行中始终至少有 2 个项目？
How to wrap items to always have min 2 items in the last row?
问：
当然，我的客户希望以响应式方式在他的网站上列出车辆。但是所有已知的技术（flex、grid）都会将最后一项包装到下一行。
但在英雄身上，这是极其丑陋的。客户希望：
- 每行最多 5 个项目
- 每行最少 2 个项目
棘手的部分是项目的数量必须是动态的。通常在 4 到 6 辆车之间
我知道我可以选择像这样的最后两个项目
.item:nth-last-child(-n+2) {
order: 2; /* set order to 2 for the last two items */
}
但我不能强迫他们包装。有什么想法吗？
答：
0赞
Stélios Filippidis
4/18/2023
#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;
}
}
}
评论