flex-basis,flex-grow,flex-shrink

flex-basis

设置子项占用空间(默认:auto)，如果没有设置就使用width/height,否则由内容撑开.

flex-basis > width/height

flex-grow

当子项未充满父项时，布局空白(available space)的分配规则；

1. sum(flex-grow)>1

根据flex-grow值平均分配
假如有个父项width为500px,他的三个子项宽度分别为100px(flex-grow:1),150px(flex-grow:2),200px(flex-grow:2)。
则会有50px的布局空白。
根据flex-grow分配，

50*1/(1+2+2) = 10;=>100+10=110px
50*1/(1+2+2) = 20;=>150+20=170px
50*1/(1+2+2) = 20;=>200+20=220px

2. sum(flex-grow)<1

当flex-grow之和小于1时，意味着不完全分配布局空白，只分配100*sum(flex-grow)%的布局空白

假如刚才的三个子项flex-grow分别为0.1，0.2，0.3，sum==0.5<1

50*0.5*0.1/(0.1+0.2+0.2) = 5;=>100+5=105px
50*0.5*0.1/(0.1+0.2+0.2) = 10;=>150+10=160px
50*0.5*0.1/(0.1+0.2+0.2) = 10;=>200+10=210px

flex-shrink

当子项内容超出父项空间时，定义子项缩放的规则。

let shrink_width;
shrink > 1 ? shrink_width = 超出部分宽度/高度 * (flex-shrink) * 子项宽度/高度 / Sum((flex-shrink) * 子项宽度/高度 )
:
shrink_width = 超出部分宽度/高度 * (flex-shrink) * 子项宽度/高度 / (Sum((flex-shrink) * 子项宽度/高度 )*Sum(shrink))

再试个例子，假如有个父项width为500px，三个子项的宽度分别为100px,250px,400px;

1. sum(flex-shrink)>1

设flex-shrink分别为3，2，3
超出部分:100+250+400-500=250px;
sum(shrink) = 0.8;
sum(shrinkwidth/height) =3100+2250+3400 = 2000;

250 * 3 *100 / 2000 = 37.5；=>100-37.5 = 62.5;
250 * 2 *250/ 2000 = 62.5；=> 250-62.5 = 187.5;
250 * 3 *400/ 2000 = 150；=> 400-150 = 250

1. sum(flex-shrink)<1

设flex-shrink分别为0.3，0.2，0.3
超出部分:100+250+400-500=250px;
sum(shrinkwidth/height) =0.3100+0.2250+0.3400 = 200;

250 * 0.3 *100 / 200*0.8 = 30；=>100-30= 70;
250 * 0.2 *250/ 200*0.8 = 50；=> 250-50 = 200;
250 * 0.3 *400/ 200*0.8 = 120；=> 400-120 = 280

本文案例

其实flex-grow和flex-shrink的差别不大，唯一区别在于缩放(shrink)大小不仅和flex-shrink
值有关，还和元素本身大小有关.
要注意一点，我在测试时发现有时候设置了shrink值但计算结果不对，是因为子项缩放有最小限制，即不能小于最长单词的长度或固定大小的元素。

By default, flex items won’t shrink below their minimum content size (the length of the longest word or fixed-size element). To change this, set the min-width or min-height property.

我的解决方法是给子项设置min-width:0;