【flex布局】解决view中两个元素一个居左一个居中

flex布局简直是万能的

一、需求

微信小程序中一列中一个居左，一个居中

二、实现

利用flex布局

<view class="total_price">
            <view class="item_wrap">
                <image bindtap="showGoods" src="../../static/img/jian.svg"></image>
            </view>
            <view class="item_wrap">
                <view class="total">合计:￥{{allPrice}}</view>
            </view>
            <view class="item_wrap"></view>
        </view>

1. 先在每个部分外包裹一个大view ，对这个大view进行flex布局
2. 对每个大view中的元素通过text-align进行排列

.total_price{
      background-color: #d7d7d7;
      width: 100%;
      display: flex;
      height: 60rpx;
      padding:0 20rpx;
      line-height: 60rpx;
      .item_wrap{
        flex: 1;
      }
      image{
        padding: 0;
        margin: 0;
        height: 60rpx;
        line-height: 60rpx;
        width: 42rpx;
      }
      .total{
        text-align: center;
      }
    }