之前面试官经常问的一个问题，自己之前只知道利用flex=1实现三栏布局中间部分自适应的功能，这次系统性的记录一下
先说答案：flex = 1，其实就是：
flex-grow: 1 ，flex-shrink: 1，flex-basis: 0%
简而言之，flex就是flex-grow 、flex-shrink、flex-basis三个属性值的缩写。
而未指定flex的值时的默认值为：
flex-grow: 0 ，flex-shrink: 1，flex-basis: auto
接下来分别介绍一下flex-grow 、flex-shrink、flex-basis三个属性值的含义：
flex-grow:定义项目的放大比例，默认值为0，即如果存在剩余的空间，也不放大去占用它。
如果所有项目的flex-grow属性都为1（1指的是权重），则它们将等分剩余空间。
如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
flex-shrink:定义了项目的缩小比列，默认值为1，即如果空间不足，将该项目缩小。
flex-shrink的值为0时，项目展开，展示出来本身的全部宽度，设置多少显示得就是多少。
flex-basis：定义了在分配多余空间之前，项目占据的空间。浏览器根据这个属性，计算主轴是否有多余空间。
flex-basis是非常重要的一个属性，乍一看与width属性类似，但是十分容易产生混淆。
它的初始值是 auto，此时浏览器会检查元素是否设置了 width 属性值。如果有，则使用 width 的值作为 flex-basis 的值；如果没有，则用元素自身的大小。如果 flex-basis 的值不是 auto，width 属性会被忽略（例如flex-basis: 0%）。
若值为0，则必须加上单位，以免被视作伸缩性。flex-basis属性指定了flex元素在主轴方向上的初始大小。
如果使用了该属性且设置了值num，那么该元素得在主轴上面的宽度就为num。
