CSS根据个数显示不同的样式

例：有1~3个item显示在一行，但item的个数不一定，1个100%；2个50%；3个33%；用CSS实现：

1.CSS部分

ul,li{
	list-style: none;
}
.listBox{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
li{
	width: 100%;
	height: 100px;
        margin: 10px;
}
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) - li{
	width:50%;
}

li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) - li{
	width: 33%;
}

2.Html部分

<ul class="listBox">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

3.页面显示