flex-grow, flex-shrink,flex-basis
flex-basis 属性决定着其他两个属性的行为，正如它的名字flex-basis是Flexbox项目的基准值，它决定着Flexbox项目可伸缩的剩余空间大小。
容器里一个flex-grow为4的项目不一定是另一个flex-grow为2的项目的2倍，它实际上做的是得到其它项目两倍的可用空间。
可用空间 = (容器大小 - 所有相邻项目flex-basis的总和)
可扩展空间 = (可用空间/所有相邻项目flex-grow的总和)
每项伸缩大小 = (伸缩基准值 + (可扩展空间 x flex-grow值))
flex-shrink也就是flex:1 1 10px中的第二个值，它应用于当项目超过容器计算值时就会将项目压缩。
像之前的例子中一个宽度最大为600px的容器和可用负空间(-200px)，通过每项收缩比例值乘以伸展基准值并累加。
项目一(1x100) + 项目二(2x200) + 项目三(3x200) + 项目四(1 x 200) = 所有项目总和(1400)
然后我们将每一项除以所有项目之和。例如项目二：
项目二收缩因数 = 项目二(2 x 200px)/所有项目之和(1400) = 0.286
然后乘以负可用空间(-200px)
第二项移除空间 = 项目二收缩因数(0.286) x 负可用空间(-200px) = -57.142向下舍入为57。
相对分布
要使每个项目是另一个项目的精准倍数只能将flex-basis设置为0.
将项目的order设置为-1将始终显示在项目的是首位。下面是具体的css。
等高 ：
.d-flex-parent {
display:flex;
align-items:stretch;
}
.d-flex-child {
display:flex;
}
