英文:
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; /*将最后两项的顺序设置为2*/
}
但我不能强制它们换行。有什么建议吗？
英文:
My client want to list vehicles in his website in a responsive way of course. But all known techniques(flex, grid) wrap the last item to the next row.
What I try to do with pictures
But in a hero it's extremely ugly. The client want:
- Maximum 5 items per row
- Minimum 2 items per row
The tricky part is the number of item must be dynamic. Usually between 4 to 6 vehicules
I know I can select the last two items like this
.item:nth-last-child(-n+2) {
order: 2; /* set order to 2 for the last two items */
}
But I can't force them to wrap. Any ideas?
答案1
得分: 0
以下是翻译好的部分：
"It turns out I had to get the number of items beforehand and inject the class into the list to control the display"
"
- "
".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;
}
}
}"
英文:
It turns out I had to get the number of items beforehand and inject the class into the list to control the display
<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;
}
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论