css flex:1和flex属性的详细解释

flex是flex-grow、flex-shrink、flex-basis的缩写，默认值是0 1 auto。后两个属性可选

• flex-grow:< number > 概念：定义项目的放大比例，默认为0。即如果存在剩余空间，也不放大

  1. 假如父元素500px，div1元素100px，div2元素200px,那么还剩余200px，默认情况下，flex-grow是0，是不放大占满父元素的

   <div class="box">
     <div class="son1">div1</div>
     <div class="son2">div2</div>
   </div>
  

  .box{
    width:500px;
    height:200px;
    border:1px solid #000;
    display:flex;
    margin:0 auto;
    margin-top:100px;
    color:white;
    font-size:30px;
  }
  .box div{
    height:100px;
  }
  .son1{
    background:red;
    width:100px;
  }
  .son2{
    background:green;
    width:200px;
  }
  

  默认情况下的flex-grow
  2. 假如我们想让div1占满父元素，div2还是保持原来宽度（flex-grow:0不放大占领剩余空间），就需要将div1设置flex-grow:1,此时的div1是300px,div2还是原来的100px

  .son1{
      background:red;
      width:100px;
      flex-grow:1;
   }
  .son2{
      background:green;
      width:200px;
   }
  

  div1设置flex-grow
  3. 假如我们想让div1和div2占一起满父元素，就需要都设置flex-grow的值了，如果div1设置flex-grow为2，div2设置flex-grow为1，那么实际上div1和div2的宽度是多少呢？大家猜测一下

    .son1{
      background:red;
      width:100px;
      flex-grow:2;
    }
    .son2{
      background:green;
      width:200px;
      flex-grow:1;
    }
  

  div1和div2一起设置flex-grow
  其实计算剩余空间分配公式就是:
  元素所占剩余空间=(自身的flex-grow值/所有子元素flex-grow值的和) * 剩余空间
  div1占剩余空间宽度=2/(1+2) * (500-100-200)
  div2占剩余空间宽度=1/(1+2) * (500-100-200)

• flex-shrink:< number >定义项目的缩小比例，默认为1。即如果空间不足，该项目将缩小。若值为0，就不缩小

  1. 假如父元素200px，div1元素100px，div2元素200px,那么还多余100px，默认情况下可以收缩的，但是我们都不收缩的话，就得设置flex-shrink:0，最后div2就会超出父元素100px

    .box{
      width:200px;
      height:200px;
      border:1px solid #000;
      display:flex;
      margin:0 auto;
      margin-top:100px;
      color:white;
      font-size:30px;
    }
    .box div{
      height:100px;
    }
    .son1{
      background:red;
      width:100px;
      flex-shrink:0;
    }
    .son2{
      background:green;
      width:200px;
      flex-shrink:0;
    }
  

  <div class="box">
    <div class="son1">div1</div>
    <div class="son2">div2</div>
  </div>
  

  flex-shrink设置为0
  2. 假如我们让div1缩小，div2不缩小的话，看能不能都在父元素之内

    .son1{
      background:red;
      width:100px;
      flex-shrink:1;
    }
    .son2{
      background:green;
      width:200px;
      flex-shrink:0;
    }
  

  div1缩小，div2不缩小
  

  我们可以看出即使设置flex-shrink可以缩小，但是缩小到最小宽度是内容的宽度，并不会缩小到0，如果没有内容的话，是可以缩小到0宽度的。
  如果缩小div2的话，是可以缩小到父元素之内的，因为div2的内容没有多到超出父元素。

  3. 如果div1和div2同时设置flex-shrink可以缩小的话，是按照什么规则缩小的呢？我们来看一下，div1设置flex-shrink:2，div2设置flex-shrink:3

    .son1{
      background:red;
      width:100px;
      flex-shrink:2;
    }
    .son2{
      background:green;
      width:200px;
      flex-shrink:3;
    }
  

  div1和div2同时设置可以缩小

  缩小的计算公式
  超出的宽度 * (子元素的宽度 * flex-shrink的值/所有子元素的宽度 * 所有子元素flex-shrink的值)
  超出的宽度=div1的宽度(100px)+div2的宽度(200px)-父元素的宽度(200px)=100px
  div1缩小的宽度=100px * (100px * 2/(100px * 2+200px * 3)) = 25px
  div2缩小的宽度=100px * (200px * 3/(100px * 2+200px * 3)) = 75px

• flex-basis:< length> | auto定义了在分配多余空间之前，项目占据的主轴空间。
  浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小

  1. 当元素同时设置了width和flex-basis,width就会被flex-basis覆盖掉

    .son1{
      background:red;
      width:100px;
      flex-shrink:0;
      flex-basis:200px;
    }
  

  width就会被flex-basis覆盖掉

  width设置了100px，但是flex-basis设置了200px。最后浏览器显示的是200px，所以width被覆盖掉了

  • 如果元素没有设置flex-basis，设置了width，默认值是auto，就会按照元素的width来计算显示
  • 如果元素设置flex-basis，没有设置width，就会按照元素的flex-basis来计算显示
    1. 如果没有设置width，flex-basis设置为auto，按照0来计算显示
  • 如果元素设置flex-basis，也设置了width，就会覆盖掉width按照元素的flex-basis来计算显示
    1. 如果设置了width，flex-basis设置为auto，按照width来计算显示
  • 如果元素没有设置flex-basis，也没有设置了width，按照0来计算显示
  • 如果元素设置flex-basis为0或者0%，无论有没有设置width，都按照0来计算显示

flex的取值

1. initial: 即取上面三个属性的默认值，0 1 auto，在有剩余空间的情况下不会有任何变化，但是在必要的情况下(子元素宽度的和大于父元素的宽度)会被收缩。
2. none: 计算值为0 0 auto，在任何情况都不会发生伸缩。等同于

     .el{ flex:none; }
     .el{
         flex-grow:0;
         flex-shrink:0;
         flex-basis:auto;
      }
   

3. auto: 计算值为1 1 auto，会根据主轴自动伸缩以占用所有剩余空间。等同于

     .el{ flex:auto; }
     .el{
         flex-grow:1;
         flex-shrink:1;
         flex-basis:auto;
      }
   

4. 一个非负数字: 该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%，等同于

     .el{ flex:1; }
     .el{
         flex-grow:1;
         flex-shrink:1;
         flex-basis:0%;
      }
   

5. 一个长度或百分比: 则视为 flex-basis 值，flex-grow 取 1，flex-shrink 取 1，等同于（注意 0% 是一个百分比而不是一个非负数字）：

     /*百分比形式的*/
     .el{ flex:0%; }
     .el{
         flex-grow:1;
         flex-shrink:1;
         flex-basis:0%;
      }
   
     /*长度形式的*/
     .el{ flex:20px; }
     .el{
         flex-grow:1;
         flex-shrink:1;
         flex-basis:20px;
      }
   

6. 两个非负数字: 则分别视为 flex-grow 和flex-shrink的值，flex-basis 取 0%，等同于：

     .el{ flex:1 2; }
     .el{
         flex-grow:1;/*第一个非负数字*/
         flex-shrink:2;/*第二个非负数字*/
         flex-basis:0%;
      }
   

7. 一个非负数字，一个长度或百分比: 则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 取 1，等同于：

     .el{ flex:11 450px; }
     .el{
         flex-grow:11;
         flex-shrink:1;
         flex-basis:450px;
      }