flex-grow、flex-shrink、flex-basis 这三个属性

1.flex-basis 用来设置盒子的宽度，其优先级大于width:

 

        
111
        
222
 

其效果item的宽度为200px;

2.flex-grow 的默认值是0，表示盒子不会索取多余的父盒子的空间；如何设置其值大于0，表示索取，值越大索取的越多；

假如设置父元素 400px，子元素 A 为100px，子元素 B 为 200px.则剩余空间为 100px

例子一：

A的 flex-grow 为 0，B的 flex-grow 为 0（即A、B不设置该属性）

则A、B的实际宽度为他们本身的宽度，即A的实际宽度为100px  ； B的实际宽度为200px

例子二：

A的 flex-grow 为1，B的 flex-grow为0（即不设置该属性）

则A的实际宽度为 100px + 100px =200px    ；  B的实际宽度为 200px + 0 = 200px

例子三：

A的 flex-grow 为 1，B的 flex-grow 为 2

则 A 的实际宽度为 100px + 100px * 1/3 =  400/3 px  , B的实际宽度为 200px + 100px * 2/3 = 800/3 px 

上面的 总系数为 1 + 2 = 3 ，然后按照 各元素的 flex-grow 的属性值进行分配 A 1/3   B 2/3；

3.flex-shrink 的默认值为 1，当父元素的宽度小于所有子元素的宽度的和时，子元素的宽度会减小。值越大，减小的越厉害。如果值为 0，表示不减小。

假如设置父元素 400px，子元素A为 200px，子元素B为 300px.则超出空间为 100px

例子一：

设置A的 flex-shrink 为 0，B的 flex-shrink 为 0

则A，B都不减小宽度，A、B的实际宽度为他们本身的宽度，即A的实际宽度为 200px  ； B的实际宽度为 300px 

例子二：

A的 flex-shrink 为 0，B的 flex-shrink 为 1，则A不减小宽度，B减小

则A的实际宽度为他本身的宽度= 200px   ， B的实际宽度为 300px - 100px（超出的宽度）= 200px

例子三：

如果A，B都减小宽度，A设置 flex-shirk 为 3，B设置 flex-shirk 为 2。则最终 A 的大小为 自身宽度 (200px) - A减小的宽度(100px * (200px * 3 / (200px * 3 + 300px * 2))) = 150px

最终 B 的大小为 自身宽度 (300px)- B减小的宽度 (100px * (300px * 2/(200px* 3 + 300px* 2))) = 250px

4.flex 这个属性我们经常使用的是flex:1,其实他全写是flex:flex-grow flex-shrink flex-basis;

其有下列几种常见的写法：

1.当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%，如下是等同的：

.item {flex: 1;}
/* 相当于下方代码 */
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

2.当 flex 取值为一个长度或百分比，则视为 flex-basis 值，flex-grow 取 1，flex-shrink 取 1，有如下等同情况（注意 0% 是一个百分比而不是一个非负数字）：

.item-1 {flex: 0%;}
/* 相当于下方代码 */
.item-1 {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}
.item-2 {flex: 24px;}
/* 相当于下方代码 */
.item-1 {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 24px;
}

3.当 flex 取值为两个非负数字，则分别视为 flex-grow 和 flex-shrink 的值，flex-basis 取 0%，如下是等同的：

.item {flex: 2 3;}
/* 相当于下方代码 */
.item {
    flex-grow: 2;
    flex-shrink: 3;
    flex-basis: 0%;
}

4.当 flex 取值为一个非负数字和一个长度或百分比，则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 取 1，如下是等同的：

.item {flex: 200 300px;}
/* 相当于下方代码 */
.item {
    flex-grow: 200;
    flex-shrink: 1;
    flex-basis: 300px;
}