如何将flexbox与媒体查询一起使用可修复重叠的对齐内容

Question

当您尝试覆盖以前应用的justify内容参数时，Flexbox似乎有一个错误。我想要做的是证明以内容为中心，但在一定宽度之后将媒体查询应用于同一项目以证明之间的内容空间。效果是证明内容空间不会覆盖原始居中，而是适用于原始样式。结果是项目从屏幕上消失。例子：
原创风格：

.header {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
}

然后应用媒体查询：

.header {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

结果不是您所期望的，就像您在原始样式之间设置了合理的内容空间一样。相反，它似乎仍然应用了中心，它试图证明已经发生的居中的ontop之间的内容空间，而不是去除居中和在两者之间应用合理的内容空间。