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 的因素，从优先级高到低

1. max-width\max-height\min-width\min-height
2. flex-basis
3. width\height
4. 内容本身的 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> 的值。