面试之flex：1是什么

今天遇到一个面试问我flex：1用过吗？让我详细说说它。现在我就来详细说说

  //css样式代码
  <style>
    .box{
      height: 200px;
      width: 300px;
      display: flex;
      background-color: blue;
    }
    .son1{
      flex: 1;
      background-color:pink;
    }
    .son2{
      flex: 1;
      background-color: yellowgreen;
    }
    .son3{
      flex: 1;
      background-color: yellow;
    }
  </style>
  
  //html元素
  <div class="box">
    <div class="son1"></div>
    <div class="son2"></div>
    <div class="son3"></div>
  </div>

结果显而易见将会是三个son盒子均分父盒子的宽度如下图所示

接下来我们看一下控制台是什么

控制台显示flex：1他会转换成flex-grow：1，flex-shrink： 1和flex-basis: 0%。 主要就是这个flex-basis:0%他代表占主轴的长度，在这就是子盒子的宽度。这里因为所有的子盒子宽度全为0所以他会均分父盒子宽度。

反正就说flex：1，在浏览器会被解析成flex-grow：1，flex-shrink： 1和flex-basis: 0%三个flex项目熟悉就可以了。后面面试官可能会继续深问三个属性的用法之类的问题准备一下就好了。