vue div里的两个span标签，两端对齐

一、vue div里的两个span标签，两端对齐，
主要是 display: flex; justify-content: space-between; 这两个设置

二、字体上下居中 align-items: center;

 <div class="cellTopStyle">
                    <span style="margin-left:15px; line-height:40px;">订单编号:{{item.orderId}}</span>
                    <span :class="{sendTypeColor:item.sendState === '01'}" style="margin-right:15px">{{item.sendState | SendState}}</span>
    </div>

布局设置

. cellTopStyle{
         width:100%;
         display: flex;
         align-items: center;//上下对齐
         justify-content: space-between; //两端对齐
        //  background-color: blue;
        .sendTypeColor{
            color: brown;
        }
     }

效果