flex: 1

总以为 flex：1，是一个属性， 后来，才知道 他是三个属性简写

flex-grow
flex-shrink
flex-basis

1.flex-grow 如果子盒子值相加大于1 就会按比例占满整个容器

.box{
  display: flex;
  height: 200px;
}
.box1 {
  flex-grow:1;
  background-color: red;
}
.box2 {
  flex-grow:2;
  background-color: blue;
}
.box3 {
  flex-grow:3;
  background-color: yellow;
}

<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>

展示结果如下

2.如果相加和 小于1

.box1 {
  flex-grow: 0.1;
  background-color: red;
}
.box2 {
  flex-grow: 0.2;
  background-color: blue;
}
.box3 {
  flex-grow: 0.3;
  background-color: yellow;
}

可以看出 box1的宽度是总宽度的 500*0.1 = 50px,由此可以计算出父盒子还有 500 * 0.2= 100px 空白