flex-shrink 属性 类似于android中的weight属性，当溢出的时候能够按比例收缩

当项目在主轴方向上溢出时，通过设置项目收缩因子来压缩项目适应容器。属性值为项目的收缩因子，属性值取非负数。

.item{
   flex-shrink: 1（默认值） | <number>
}
.item1{
   width: 120px;
   flex-shrink: 2;
 }

.item2{
   width: 150px;
   flex-shrink: 3;
}

.item3{// 项目3未设置flex-shrink，默认flex-shrink值为1
	 width: 180px;
}

为了加深理解，我们举个例子：

一个宽度为400px的容器，里面的三个项目width分别为120px，150px，180px。分别对这项目1和项目2设置flex-shrink值为2和3。

.container{
	display: flex;
	width: 400px; // 容器宽度为400px
}

在这个例子中，项目溢出 400 - (120 + 150 + 180) = -50px。计算压缩量时总权重为各个项目的宽度乘以flex-shrink的总和，这个例子压缩总权重为120 * 2 + 150 * 3+ 180 * 1 = 870。各个项目压缩空间大小为总溢出空间乘以项目宽度乘以flex-shrink除以总权重：

item1的最终宽度为：120 - 50 * 120 * 2 / 870 ≈ 106px

item2的最终宽度为：150 - 50 * 150 * 3 / 870 ≈ 124px

item3的最终宽度为：180 - 50 * 180 * 1 / 870 ≈ 169px

其中计算时候值如果为小数，则向下取整。

flex-grow 属性 能够填满某个方向的所有长度。就是按照比例将剩余的空间进行分配

当项目在主轴方向上还有剩余空间时，通过设置项目扩张因子进行剩余空间的分配。属性值为项目的扩张因子，属性值取非负数。

.item{
   flex-grow: 0（默认值） | <number>
}

为了加深理解，我们举个例子：

一个宽度为400px的容器，里面的三个项目width分别为80px，120px，140px。分别对这项目1和项目2设置flex-grow值为3和1。

.container{
	 display: flex;
    width: 400px; // 容器宽度为400px
}

.item1{
	 width: 80px;
	flex-grow: 3;
}

.item2{
     width: 120px;
	flex-grow: 1;
}

.item3{// 项目3未设置flex-grow，默认flex-grow值为0
	width: 140px;
}

在这个例子中，容器的剩余空间为 400 - (80 + 120 + 140) = 60px。剩余空间按 60 / (3 + 1 + 0) = 15px进行分配：

item1的最终宽度为：80+ (15 * 3) = 125px

item2的最终宽度为：120 + (15 * 1) = 135px

item3的最终宽度为：140 + (15 * 0) =140px