flex布局：父元素设为flex,子元素设置宽度无效

<div class='box'>

       <div class='box2'></div>
       <div class='box2'></div>
       <div class='box2'></div>
      
</div>

.box {
  display:flex;
}
.box2 {
   // 直接设置width:100px无效
   
   // 需要设置成下面格式
   // flex: flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
   // flex-shrink: 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
   // flex-grow: 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
   // flex-basis: 定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
   flex: 0 0 100px;
}