动态列表元素的选择器问题

Question

请查看代码演示以便于理解。

当列表元素显示为两列时，可以使用以下方法实现页面响应式设计。

.test {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
.test div {
	width:calc(50% - 30px);
	padding:10px 0 10px 10px;
	margin:8px;
	background:#ffc107;
}
.test div:nth-last-of-type(1):nth-child(odd) {
	width:100%;
}

<div class="test">
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
</div>

当列表超过两列时，上述方法不再适用。

例如，以下列表有四列。如何选择最后一行的奇数元素？

.test {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
.test div {
	width:calc(25% - 30px);
	padding:10px 0 10px 10px;
	margin:8px;
	background:#ffc107;
}

<div class="test">
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
</div>

有没有针对此问题的 CSS 选择器解决方案？

Answer 1

您需要将width:声明换成flex:声明：

flex: 1 0 calc(25% - 30px);

flex是一个简写声明，声明：

• flex-grow
• flex-shrink
• flex-basis

最后一个值(flex-basis(声明元素的默认宽度，其他条件相同。

如果最后一行中的元素更多或更少，则flex-grow和flex-shrink指示这些元素相对于需要填充的空间应增长或收缩多少。

工作示例：

.test {
	display: flex;
	flex-wrap: wrap;
	justify-content:space-between;
}
.test div {
	flex: 1 0 calc(25% - 30px);
	padding: 10px 0 10px 10px;
	margin: 8px;
	background: #ffc107;
}

<div class="test">
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
</div>