解决使用justify-content: space-between只有两长图片时,图片会排在容器的两侧

在使用flex布局的时候很方便,但是也会存在很多问题,比如space-between的Bug,解决的办法就是给设置display: flex的父元素添加两行样式即:

content: ' ',

' 这个宽度是子元素的宽度'

上面的方法也是我在别人的博客中看到的,但是并没有帮我解决项目中的问题,以下是个人经验分享:

通过这样的方法确实可以解决在一行只有两个元素的时候两个盒子分布在父元素的两侧,但是两个盒子之间的间距还是太大,最后的解决方案是,不设置justify-content:space-between,给每个元素设置maigin-left;这样的不论是只有两个元素还是多个元素,他们之间的间距都是均匀的

原文地址:https://www.cnblogs.com/zhang-jiao/p/11211334.html