面试官：「flex：1」

前言

面试中经常会被问到 flex:1 是什么？flex:0 是什么？ flex:auto 又是什么？其实很多人都分不清楚，只有面试的时候才会去看，正所谓面试造航母，工作拧螺丝。

1. flex-grow 定义项目放大比例，默认值是0，即存在剩余空间也不放大。
2. flex-shrink 定义项目缩小比例，默认值是1，即不存在剩余空间也不缩小。
3. flex-basis 定义剩余空间的分配，默认值是auto，即项目原来的大小。

解释：当一个容器设置了display:flex,如果容器没有被占满，则剩余的空间由flex-grow的去支配，如果相反容器空间不足，则由flex-shrink去支配。在计算放大或缩小比例时，要根据 flex-basis的值来计算比例。

🌰flex-grow

原本 container 的宽度是400px，每一个span的宽度是100px，这个时候多出100px的剩余空间，这个时候将其中一个元素设置 flex-grow：1，则会吃掉剩余的100px空间。（⚠️值得注意的是这里是有剩余空间的，如果设置flex-shrink属性是不会生效的。）

  <div class="container">
    <span>111</span>
    <span>222</span>
    <span>333</span>
  </div>

  <style>
    .container {
      display: flex;
      width: 400px;
      height: 50px;
      border: 1px solid #999;
    }

    span {
      width: 100px;
    }

    span:first-child {
      flex-grow: 1;
    }
  </style>

🌰flex-shrink

原本 container 的宽度是400px，每一个span的宽度是100px，但由于有5个span，所以每个span只有80px，这个时候将第一个span设置flex-shink：2，则第一个宽度变成了66.66px。（⚠️值得注意的是如果第一个span设置的flex-shink:0,则第一个span的宽度不会缩小，保持100，其他span等比例缩小。）

  <div class="container">
    <span>111</span>
    <span>222</span>
    <span>333</span>
    <span>444</span>
    <span>555</span>
  </div>

  <style>
    .container {
      display: flex;
      width: 400px;
      height: 50px;
      border: 1px solid #999;
    }

    span {
      width: 100px;

    }

    span:first-child {
      flex-shrink: 2;
    }
  </style>

🌰flex-basis

原本 container 的宽度是400px，每一个span的宽度是100px，当设置第一个span的flex-basis:20% 的时候，表示第一个元素设置为 container 宽度的百分之二十，也就是80px。

  <div class="container">
    <span>111</span>
    <span>222</span>
    <span>333</span>
  </div>

  <style>
    .container {
      display: flex;
      width: 400px;
      height: 50px;
      border: 1px solid #999;
    }

    span {
      width: 100px;
    }

    span:first-child {
      flex-basis: 20%;
    }
  </style>

结论

当n是一个非负数时，flex：n代表的意思如下：

    flex ：n；
    /* 等同于 */
    flex-grow ：n；     
    flex-shrink ：1； 
    flex-basis ：0%；

所以flex:1代表的是 flex:1 1 0%; 同理flex:2代表的是 flex:2 1 0%;

flex:auto代表的是flex: 1 1 auto;

flex:0代表的是 flex:0 1 0%