一、如果子元素设置了flex-basis，那么元素的宽度是多少呢？
分以下几种情况：
1.flex-basis:auto;
如果设置为auto,那么子元素的宽度以子元素的width值为基准。
比如width:70px; 那么子元素占的横向空间就是70px;
如果子元素未设置width，那么宽度为子元素内容的宽度
2.flex-basis不设置((如果没有设置，默认是auto))
这种情况就以子元素设置的width为主，如果没有设置就是子元素内容的宽度
3.flex-basis:100px
如果给flex-basis设置了具体的宽度/高度值，那么无论有没有设置width/height，子元素都会以flex-basis的值为基准宽度。
二、flex-grow 定义项目的放大比例，如果没有设置，默认为零。
如果父元素定义为flex布局。并且父元素的宽度为400px;
父元素有3个子元素，子元素1的基准宽度是50px、子元素2的基准宽度为70px、子元素3的基准宽度为100px。
那么3个子元素共占用了220px，父元素剩余的空间是180px;
这个时候，我给子元素1设置flex-grow:0;表示就算父元素有剩余空间，子元素1也不放大。
子元素2设置flex-grow:2;
子元素3设置flex-grow:1;
那么 就意味着 父元素剩余的180px，被分为了3份。
子元素2再占2份，也就是120px;
子元素3再占1份，也就是60px;
最后 子元素1的宽度仍然是 50px
子元素2的宽度是 70px+120px = 190px;
子元素3的宽度是 100px+60px = 160px;
三、flex-shrink定义项目的缩小比例，如果没有设置，默认是1
<body>
<div class="box">
<div class="item">1</div>
<div class="item">222</div>
<div class="item">3</div>
</div>
</body>
<style>
.box{
display:flex;
width:400px;
height:50px;
background-color:#eee;
}
.item{
height:50px;
}
.item:nth-child(1){
width:250px;
background:red;
}
.item:nth-child(2){
width:150px;
flex-basis:auto;
flex-shrink:2;
background:grey;
}
.item:nth-child(3){
width:50px;
flex-basis:100px;
flex-shrink:2;
background:yellow;
}
</style>
子项1的基准宽度是250px;
子项2的基准宽度是150px;
子项3的基准宽度是100px;
总共是500px;超过了 父容器的宽度400px的范围；容器放不下；
超出来的空间，需要被每个子项根据自己设置的flex-shrink进行吸收。
子项1的 flex-shrink 是1(未设置，默认为1)
子项2的 flex-shrink 是2
子项3的 flex-shrink 是2
子项1 需要吸收的空间为 (250*1)/(250*1+150*2+100*2)*100 = 33.33px;子项1真实的空间为 250-33.33 = 216.67px;
子项2 需要吸收的空间为 (150*2)/(250*1+150*2+100*2)*100 = 40px; 子项2真实空间为 150-40 = 110px;
子项3 需要吸收的空间为 (100*2)/(250*1+150*2+100*2)*100 = 26.67px; 子项3真实空间为 100-26.67 = 73.33px;
四、flex缩写
flex 是flex-grow、flex-shrink、flex-basis的缩写
flex 有2个默认值
flex:auto; //(1,1,auto);
flex:none; //(0,0,auto);
我们常用的 flex:1;
其实是 flex:1 1 auto; //的缩写
