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配合,效果不是很好.

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。