flex布局下，子元素的padding会影响子元素的宽度分配

资料

参考 =》 关于flex弹性布局子元素添加padding问题

改资料有一点说的不对，flex布局下的子元素并非border-box，如下图

问题简述

flex布局下，子元素的padding会影响子元素的宽度分配

注意这里上下的flex的子盒子，位置偏移了

代码如下

      <div v-if="total" class="total">
        <div class="p-item-box p-title">
          <div class="p-item flex-1 bg-0">222类型</div>
          <div class="p-item flex-1 bg-1">条数</div>
          <div class="p-item flex-1 bg-0">重量</div>
          <div class="p-item flex-1 bg-1">重量</div>
        </div>
        <div class="p-item-box p-title">
          <div class="p-item flex-2 bg-0">333类型</div>
          <div class="p-item flex-1 bg-1">条数</div>
          <div class="p-item flex-1 bg-1">重量</div>
          <div class="p-item flex-1 bg-0">条数</div>
          <div class="p-item flex-1 bg-0">重量</div>
          <div class="p-item flex-1 bg-1">条数</div>
          <div class="p-item flex-1 bg-1">重量</div>
        </div>
      </div>

.flex-2 {
  flex: 2;
}
.flex-1 {
  flex: 1;
}
.text-center {
  text-align: center;
}

.p-item-box {
  display: flex;
  &.p-title {
    height: 36px;
    line-height: 36px;
  }
  .p-item {
    box-sizing: border-box;
    padding-left: 10px;
    overflow: hidden;
    white-space: nowrap;
    &.bg-0 {
      background: #0f1d33;
    }
    &.bg-1 {
      background: #1b293d;
    }
    &.bg-2 {
      background: #051621;
    }
  }
}

解决方法

1.嵌套div加padding

2.使用grid布局

3.使用百分数定死宽度也行