flex justify-content样式问题

情况: 父级元素设置justify-contnet:space-around,设置元素的宽度为30%,如果元素不足3或者尾行不足三个,样式会不符合预期.

结构:

ul > li*5,图从网上随便找的,凑合一下就可以

这里通过设置最后一个元素的margin-right来实现.

ul li:nth-child {margin-right:auto;}

这样就皆大欢喜了,其实没有什么鸟用.如果没有主动设置子元素li的外边距,那么样式依旧是错的.我这里li的宽度是30%,所以我给每个li都设置了margin:0 1.5%;实现了效果,最后一个li的margin-right:auto.不知道什么原理,反正实现了.另外就是网上还有设置ul:after:{content:'';width:30%;}的方式实现,其实就是自动向后添加空元素而已,需要js配合,效果不是很好.