1.【flex-grow】决定了flex items 如何扩展拉伸
总结：
一个元素不设置或者flex-grow设置为0，默认是元素的宽度；如果给一个或多个元素设置了非负的flex-grow值，父元素剩余的宽度（如果有）重新分配宽度，flex-grow的值代表分配到的宽度比例。
有点难理解，下面有例子解释说明。
1.1.【flex-grow】默认样式
可以设置任意非负数字（正小数、正整数、0），默认是0当flex-container在main axis（主轴）方向上有剩余size（空间）时，flex-grow属性才增加宽度
三个宽度120px（3*120px=360px）的子元素放在一个宽度420px的父级元素中，父级元素使用flex布局
<div class="container"><div class="item item1">120px</div><div class="item item2">120px</div><div class="item item3">120px</div></div>
.container {display: flex;width: 420px;height: 200px;} .item {width: 120px;height: 120px;}
三个item的flex-grow默认都是0，所以不会占用剩下的空间，还有60px剩余，如图1-1所示。
1.2.【flex-grow】只给一个子元素添加flex-grow 填满父元素宽度
只给一个子元素设置flex-grow值
设置了正值flex-grow（可以是flex-grow:1、flex-grow:2）的那个子元素，会占满父元素剩余的空间。其他子元素为默认值0，占原来自己的宽度
只要子元素添加了flex-grow正值，就重新分配父元素剩余空间的宽度，如图1-2、1-3所示。
1.3.【flex-grow】给多个子元素添加flex-grow 填满父元素宽度
给多个子元素设置flex-grow值
给设置了正值的多个子元素分配宽度按照flex-grow的值按比例分配父元素剩余宽度
可以看到浏览器将父元素剩余的宽度按比例分配给了item2和item3
效果如图1-4所示
给每个子元素都添加flex-grow属性，只要是添加了flex-grow的都会按比例分配，效果如图1-5所示。父元素剩余的宽度是60px，所以给第一个子元素分配了30px、第二个子元素分配了20px、第三个子元素分配了10px。
2.【flex-shrink】决定了flex items 如何收缩
总结：
一个元素不设置或者flex-shrink设置为1，默认会压缩元素的宽度；如果给一个或多个元素设置了0的flex-shrink值，那些元素会按原宽度显示，宽度可以超过父元素。
下面有例子解释说明。
2.1.【flex-shrink】默认样式
可以设置任意非负数字（正小数、正整数、0），默认值是1当flex-items在main axis方向超过了flex container的size，flex-shrink属性才有效。item总共的宽度比容器大
三个宽度120px（3*120px=360px）的子元素放在一个宽度300px的父级元素中，父级元素使用flex布局
<div class="container"><div class="item item1">120px</div><div class="item item2">120px</div><div class="item item3">120px</div></div>
虽然3个宽度为120px的子元素超过了父元素300px，但是默认会缩小每个子元素的值以放进三个子元素，如图2-1所示。
.container {display: flex;width: 300px;height: 200px;}.item {width: 120px;height: 120px;}
2.2.【flex-shrink】给一个或多个子元素设置flex-shrink:0
给一个子元素设置flex-shrink:0值，这个元素就会按原宽度显示，而其他元素就会被挤压
当设置flex-shrink:0的元素对应的宽度大于父元素的时候，会超出父元素宽度，如图2-3所示
3.【flex-basis】决定flex items的基本大小
应用的场景比较少，而且平常也很少去主动设置。默认值是auto。flex-basis用来设置flex items在main axis方向上的base size，与width有点类似，下面与其他大小设置的优先级进行比较
决定 flex items 最终 base size 的因素，从优先级高到低
max-width\max-height\min-width\min-heightflex-basiswidth\height内容本身的 size
4.【flex】缩写属性
4.1.【flex】单值语法
一个无单位数(<number>): 它会被当作flex:<number> 1 0的值。flex-shrink的值被假定为1，即可以伸缩。flex-basis的值被假定为0，默认是没有宽度的。一个有效的宽度(width)值: 它会被当作 <flex-basis>的值。关键字none，auto或initial.
4.1.1.【flex】无单位数
下面的内容不好理解，可以只记住结论：
在给一个或多个子元素设置了flex:<number>后，会将那个子元素或者那些子元素的宽度+父元素剩余的宽度按比例重新分配。
举例说明1：一个item设置flex值
三个宽度120px（3*120px=360px）的子元素放在一个宽度420px的父级元素中，父级元素使用flex布局，如图4-1所示。
<div class="container"><div class="item item1">120px</div><div class="item item2">120px </div><div class="item item3">120px </div></div>
.container {display: flex;width: 420px;height: 200px;}.item {width: 120px;height: 120px;}
给item3设置了flex:1后，item3的宽度加上黄色部分（父元素剩余的宽度）会重新分配宽度。如图4-2所示。
因为flex:1;会被当做flex:1 1 0;
flex-basis暂定为0，没有宽度，flex-grow又设置为1，就占用了全部的宽度。如图4-3所示
举例说明2：多个item设置flex值
给item1设置flex:1; 给item2设置flex:2 ; 给item3设置flex:3
flex:flex-grow flex-shrink flex-basis;
给元素设置flex单值，flex-basis为0，没有宽度。在本例子中设置了三个子元素，所以整个父元素都没有宽度。又设定了flex-grow，子元素按比例分配剩下的宽度。
4.2.【flex】双值语法
双值语法:
第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。
第二个值必须为以下之一：
一个无单位数：它会被当作 <flex-shrink> 的值。一个有效的宽度值: 它会被当作 <flex-basis> 的值。
4.3.【flex】三值语法
第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。第二个值必须为一个无单位数，并且它会被当作 <flex-shrink> 的值。第三个值必须为一个有效的宽度值， 并且它会被当作 <flex-basis> 的值。
