当flex遇上margin:auto的子元素

在做uni-app项目时，父元素为flex布局，2个uni-button竟然居中显示了，默认应该是靠左显示啊，后来发现uni-button设置了margin: auo属性

margin优先级高于justify-content，在有剩余空间的情况下，margin元素会平分剩下的空间

如上图，A与B都设置了 margin: auto ,所以左右均分了剩余空间

<div class="flex">
    <div class="A">A</div>
    <div class="B">B</div>
</div>

.flex{
    display: flex;
}
.A{
    width: 200px;
    background-color: orange;
    margin: 0 auto;
}
.B{
    width: 200px;
    background-color: tomato;
    margin: 0 auto;
}

可以利用margin:auto来实现一下布局，

如图，BC作为整体在中间，按照我以前的做法，会将B、C上面加一级父元素，现在有更简单的写法，不用再额外增加div元素：

<div class="flex">
    <div class="A">A</div>
    <div class="B">B</div>
    <div class="C">C</div>
    <div class="D">D</div>
</div>

.A{
    width: 200px;
    background-color: orange;
}
.B{
    width: 200px;
    background-color: tomato;
    margin-left: auto;
}
.C{
    width: 200px;
    background-color: cyan;
    margin-right: auto;
}
.D{
    width: 200px;
    background-color: blue;
}