display:flex

即"弹性布局"，子元素的float、clear和vertical-align属性将失效，在需要排版的时候通常用display:flex比较好，它可以让内部的标签按内容自适应排列
如下图的布局：

订单编号和代付款要实现居左居右，通常使用浮动float：right，但这种方法时刻要清除浮动，要不然下面的内容排列十分麻烦，于是我们可以父盒子使用display:flex，子盒子要居右只要margin-left:auto，页面就自动排列好了

  <div class="con6">
            <div class="con1">订单编号：{{item.orderid}}</div>
            <div class="con2">{{item.state}}</div>
          </div>

  .con .con6 {
    border-bottom: 1px solid #f1f1f1;
    display: flex;
    margin: 0 10px;
  }
  .con .con1 {
    color: #999;
    font-size: 13px;
    padding: 10px 0;
  }

  .con .con2 {
    color: orange;
    font-size: 14px;
    padding: 10px;
    margin-left: auto;
  }