问题

图片问题

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

我试图用图片做的事情

但在主视图中，它非常难看。客户希望：

• 每行最多5个项目
• 每行最少2个项目

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

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

.item:nth-last-child(-n+2) {
  order: 2; /*将最后两项的顺序设置为2*/
}

但我不能强制它们换行。有什么建议吗？

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

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