以前用flexbox布局都是简单的使用，总是有一些细节懵懵懂懂，本文通过公式的形式来探究flexbox中的flex属性，以下纯属个人理解，如有理解错误之处，欢迎指出。
以下讲解当做你已经了解flexbox是什么，如不了解flexbox请看这里
flex属性
flex属性是flex-grow 、flex-shrink和flex-basis的简写。
一. flex-grow
首先要记住的一点是：flex-grow属性值设置为2的元素宽度不一定是flex-grow属性设置为1的元素宽度的2倍。
例如: 演示地址
css:
#wrap{
display: flex;
width: 500px;
height: 500px;
background: silver;
margin:0 auto;
align-items: flex-start;
}
.item{
text-align: center;
font-size: 20px;
color:#fff;
font-weight: 700;
}
.item1{
background: red;
flex-grow:2;
}
.item2{
flex-grow: 1;
background: orange;
align-self: center;
}
.item3{
background: blue;
align-self: flex-start;
}
.item4{
background: green;
align-self: flex-end;
}
你会发现：item1的宽度(312.76px)并不是item2宽度(162.55px)的2倍。这是为什么呢？原来，item1得到的剩余空间时item2得到的剩余空间的2倍。
解释一下:还是拿上面这个例子来说:item3和item4的宽度都是12.34px,这是元素内容的宽度(此时元素的flex-grow值是默认的0)；
它是这么计算的:500-12.34*4=450.64,此时450.64就是剩余空间，由于item1占用2份，item2占用1份，item3和item4都是占用0份，因此将剩余空间分配成3份：450.64/3=150.21(约等于)。然后再扩展item1和item2 即:12.34+2*150.21=312.76(item1);12.34+150.21=162.55(item2)。
但是又有一种情况不太一样，就是当flex-basis属性的值不是auto时，此时元素的基准值是flex-basis设置的值；
演示地址
css:
body{
margin:0;
}
*{
box-sizing: border-box;
}
#wrap{
display: flex;
width: 500px;
height: 500px;
background: silver;
margin:0 auto;
align-items: flex-start;
}
.item{
text-align: center;
font-size: 20px;
color:#fff;
font-weight: 700;
}
.item1{
background: red;
flex-grow:2;
flex-basis: 100px;
}
.item2{
flex-grow: 1;
background: orange;
align-self: center;
flex-basis: 50px;
}
.item3{
background: blue;
align-self: flex-start;
}
.item4{
background: green;
align-self: flex-end;
}
此时的计算公式是:500-12.34*2-150=325.32,此时剩余空间是325.32，再分配成3份，各自分配给item1和item2, (325.32/3)*2+100=316.88(item1),(325.32/3)+50=158.44(item2);
总结一下：
- 剩余空间 =（容器大小 - 所有相邻项目flex-basis 总和）
【注:】若flex-basis不设置或者设置成auto,则：剩余空间 =（容器大小 - 所有相邻项目flex-basis和项目内容宽度的总和）
- 每项伸缩大小 = 伸缩基准值 + ((剩余空间 / 所有相邻项目flex-grow总和) *此项的flex-grow值)
二、flex-shrink
flex-shrink也就是flex:1 1 10px中的第二个值，它应用于当项目超过容器计算值时就会将项目压缩。
css:
body{
margin:0;
}
*{
box-sizing: border-box;
}
#wrap{
display: flex;
width: 500px;
height: 500px;
background: silver;
margin:0 auto;
align-items: flex-start;
}
.item{
text-align: center;
font-size: 20px;
color:#fff;
font-weight: 700;
}
.item1{
background: red;
flex:2 1 200px;
}
.item2{
background: orange;
align-self: center;
flex:1 2 200px;
}
.item3{
background: blue;
align-self: flex-start;
flex:1 2 200px;
}
.item4{
background: green;
align-self: flex-end;
flex:1 1 200px;
}
宽度最大为500px的容器和可用负空间(-300px)，通过每项收缩比例值乘以伸展基准值并累加。
- 项目一(1x200) + 项目二(2x200) + 项目三(2x200) + 项目四(1 x 200) = 所有项目总和(1200)
然后我们将每一项除以所有项目之和。例如项目二：
- 项目二收缩因数 = 项目二(2 x 200px)/所有项目之和(1200) = 1/3
然后乘以负可用空间(-300px)
第二项移除空间 = 项目二收缩因数(1/3) x 负可用空间(-300px) = -100。
第二项的宽度= 200-100=100
【注:】若flex-basis属性值为auto,则总宽度500先减去该项的内容宽度，再按照上述公式计算。
