flex 均分铺满

 

 

 

 

 

      <view>充值金额</view>
      <view class="weui-flex">
        <repeat for="{{amountTab.amountType}}" key="index" index="index" item="item">
          <view class="amount-item" @tap="onTap" data-key="currentType" data-val={{index}}>
            <view class=" {{index===amountTab.currentType ? 'amount-item_select-after' :''}}">
              <view>
                <view class="amountType-gift">{{index===0 ? ' ': '送'+item[1]+'币'}}</view>
                <view class="amountType-exchange-rate">
                  <!-- 官方不建议span -->
                  <text>{{item[0]}}</text><text>元</text>=<text>{{item[0]+item[1]}}</text><text>币</text>
                </view>
              </view>
            </view>
          </view>
          <view class="{{index%2===0 ? 'amountType-separation': ''}}"></view>
        </repeat>
      </view>




  .weui-flex {
    display: flex
  } // https://weui.io/weui.css
  .amount-item {
    display: inline-flex; // 父已经去除padding
    @2items_padding-width : @wx-width_subtract-padding-width*0.05; // 并排的2个选项区域的外围边框border；
    @item-separation-margin-width: 0.05; // 2个选项横排；选项margin水平间距；
    @item-border-width: @common_border-width; // 2个选项的border宽度；
    @item-available-width: @wx-width_subtract-padding-width*(1- @item-separation-margin-width) - @2items_padding-width*2 - @item-border-width*4; // 待布局选项区域；
    @items_width-share: 0.9; // 选项宽度份额，其他留作2个选项间的水平margin；使用margin的原因是项有边框；
    @item-margin-width: @item-available-width*(1- @items_width-share)/4; // 2个选项之间的margin宽度；
    @item-render-width: @item-available-width*@items_width-share/2; // 选项最终被渲染的宽度；
    // @item-render-height: @item-render-width/@item-width-divide-height; // 保持选项宽高比,选项最终被渲染的高度；
    @item_select-after-font-size: @common_select-after-font-size;
    border: @common_border-width solid @color-main_gray;
    width: @item-render-width;
    .amountType-separation {
      margin: 0 @item-separation-margin-width*@wx-width_subtract-padding-width;
    }
    .mixin-block-float(@f: right) {
      display: block;
      float: @f;
    }
    .amountType-gift {
      .mixin-block-float(@f: right);
      background-color: @color-main_red;
      border-radius: 20% 0 0 30%;
      color: #fff;
      font-size: 80%; //TODO exact
    }
    .amountType-exchange-rate {
      .mixin-block-float(@f: left);
      @v: 700;
      text:nth-last-child(2) {
        color: @color-main_red;
        font-weight: @v;
      }
      text:nth-child(1) {
        font-weight: @v;
      }
    }
  }
  .amount-item_select-after {
    border: @common_border-width solid @color-main_blue;
    &:after {
      .mixin-item_select-after(@font-size: @common_select-after-font-size, @margin-top: @common_select-after-font-size);
    }
  }

　　flex  均分铺满