css布局中的flex属性的使用

面试官：请你列举一下实现二列布局的方式？
小Z：父div => display:flex 第一个子div 定宽，第二个flex:1
面试官:flex:1 是什么意思？里面有几个属性？属性值是什么？分别代表什么意思？
小Z：。。。
解答：
flex三个属性：
1.flex-grow => 放大
2.flex-shrink => 收缩
3.flex-basis => 缩放按照的标准
flex:1; => 1 1 0%
flex:2 => 2 1 0%
三个属性起作用的的条件
1.flex-grow触发的条件
  当item的总宽度，小于wrap的宽度的时候。 
 页面结构： 

  <div class="wrap">
    <div class="item1"></div>
    <div class="item2"></div>
    <div class="item3"></div>
  </div>

页面样式：

.wrap {
    width: 400px;
    display: flex;
    border: 1px solid #000;
  }
  .item1 {
    width: 100px;
    height: 50px;
    background: red;
    flex: 1;
  }
  .item2 {
    width: 100px;
    height: 50px;
    background: pink;
    flex: 1;
  }
  .item3 {
    width: 100px;
    height: 50px;
    background: green;
    flex: 1;
  }

放大计算原理：
如果第三属性值是 0%，按照 grow 的值来进行划分。
如果第三属性值是不是 0%，是具体值，那么整体的宽度将减去各个item累计的basic的值，剩下可支配的空间 按照grow 的比例划分。

2.flex-shrink触发条件
 当item的总宽度,大于wrap的宽度的时候。 
 页面结构 :

 <div class="wrap">
    <div class="item1"></div>
    <div class="item2"></div>
    <div class="item3"></div>
  </div>

样式:

 .wrap {
    width: 200px;
    display: flex;
    border: 1px solid #000;
  }
  .item1 {
    height: 50px;
    background: red;
    flex: 0 2 100px;
  }
  .item2 {
    height: 50px;
    background: pink;
    flex: 0 1 100px;
  }
  .item3 {
    height: 50px;
    background: green;
    flex: 0 2 200px;
  }

缩小计算规则：
按照 shrink 的值来进行缩放，第三属性值一定不能 0%，（主要是基于第三个参数进行缩放的  超过宽度=（累计宽度-父亲宽度的差值），按照缩放比例划分，然后 最后显示宽度 =（本身固有的宽度 - 超过宽度*划分比例）。
 如果为0 % ，还是第一个参数起作用。

注意点：
1.对于flex的自动收缩/放大，实际是划分的是可支配的空间，可支配的空间，并不包括 padding 、border、margin（flex item 元素不存在margin 合并的现象）
2.设置了item 的flex,就不要设置元素本身的width，不然设置的width,不生效。
3.对于flex 的item，如果不设置item的flex 的值，设置item宽度的宽度，当wrap大于item 的累计和时，item 不会进行方法。但是，如果item累计和大于wrap，子item会根据宽度来进行收缩。
4.对于二栏布局，第一个item 固定宽度，第二个item设置flex:1 .其实这种做法并不安全，当第二个子元素的内容超出flex为1 划分的宽度时，第一个item 的宽度将会被挤掉。是因为flex的子元素设置max-width:auto；造成的原因。
常见的解决方法：
1设置item的overflow：hidden。
2.设置第一个item 的flex 的basis为固定的宽度。