关于flexbox属性justify-content失效原因终于找到了【坑点】

记录一下,坑我好一会儿了
正常我们期望

justify-content: space-between;

得到的结果是

在这里插入图片描述

但是有时候设置了,会变成这样
关于flexbox属性justify-content失效原因终于找到了【坑点】_第1张图片
原因一:子元素设置了 margin:auto,注意:margin-left/right auto 这些是没问题的
关于flexbox属性justify-content失效原因终于找到了【坑点】_第2张图片

原因二:盒子本身伪类选择器 被设置成了如下样式
关于flexbox属性justify-content失效原因终于找到了【坑点】_第3张图片
解决方案: content: normal; 即可解决

你可能感兴趣的:(关于flexbox属性justify-content失效原因终于找到了【坑点】)