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部分

        
  • 1
  • 2
  • 3

3.页面显示




你可能感兴趣的:(Css)