flex-basis、flex-grow、flex-shrink

一、如果子元素设置了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

  
1
  
222
  
3




子项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;  //的缩写