flex:1是啥意思？

先说结论

flex:1 === flex:1 1 0px

flex的含义

flex是 flex-grow 、flex-shrink 、flex-basis属性的缩写
flex: <flex-grow> <flex-shrink> <flex-basis>

• 当container_width > sum(flex_basis)时，flex-shrink值不会生效，各item根据flex-grow按比例分配剩余的空间
• 当container_width < sum(flex_basis)时，flex-grow值不会生效，各item以flex-basis为基础值，根据flex-shrink按比例缩小

eg：
当container_width=600px
总空间大于各basis之和，left = 600-200-300-20 = 80px，各个item均分剩余空间，80/3=26.67px
即

item1_width=200+22.67=226.67px
item2_width=300+22.67=326.67px
item3_width=20+22.67=46.67px

当container_width=200px，总空间小于各basis之和，所以需要缩放
即

shrink1=1/4=0.25
shrink2=2/4=0.5
shrink3=1/4=0.25
item1_width=200*(1-0.25)=226.67px
item2_width=300+22.67=326.67px
item3_width=20+22.67=46.67px

 <div class="container">
      <div></div>
      <div></div>
      <div></div>
 </div>


.container {
  width: 100%;
  display: flex;
  height: 40px;
  div:nth-of-type(1) {
    flex: 1 1 200px;
    background: burlywood;
  }
  div:nth-of-type(2) {
    flex: 1 2 300px;
    background: cadetblue;
  }
  div:nth-of-type(3) {
    flex: 1 1 20px;
    background: chocolate;
  }
}