那天，高高兴兴的测试flex属性。大家都知道，当父盒子display:flex的时候，子盒子即使宽高和大于父盒子，也会由于flex的特性进行收缩；然而，在给父盒子加了flex-direction:column之后，居然出现了:
它们没收缩！！！！！！
html：
<div class="father">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
</div>
css（没加flex-direction:column）：
.father{
width: 300px;
height: 300px;
background-color: pink;
display: flex;
margin: 100px auto;
}
.box1,.box2,.box3,.box4{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
}
.box1{
background-color: red;
}
.box2{
background-color: yellow;
}
.box3{
background-color: green;
}
.box4{
background-color: purple;
}
再三测试，发现是行高的影响
又再三测试，总结出来了一些规律
在竖直方向上
a.当盒子的行高和大于等于父盒子时候，行高最大的盒子的行高
1.大于等于自身设定的高度，则高度为设定的高度；剩下的父盒子高度则为父盒子原高度减去子盒子的高度；然后再其他盒子进行判断。
2.小于自身设定的高度，则高度为行高
b.当盒子的行高和小于父盒子的时候，行高最大的盒子的行高
1.大于等于父盒子高/盒子个数且大于盒子设定的高度时，则该盒子高度为设定的高度，剩下的父盒子高度则为父盒子原高度减去子盒子的高度；然后再其他盒子进行判断
2.大于等于父盒子高/盒子个数且小于盒子设定的高度时，则该盒子的高度为行高，剩下的父盒子高度则为父盒子原高度减去子盒子的高度；然后再其他盒子进行判断。
3.小于父盒子高/盒子个数且小于盒子设定的高度时，则盒子们均分剩下的高度；
如1：父盒高为300px，四个子盒子高为100px；行高分别设为120px，100px，45px，45px；总行高为120+100+45+45=310>300
则：盒子1行高大于等于自身设定的高度(120>100)，走a1路线，盒子1高度将为100px；父盒子剩下高度为300-100=200px；
剩下三个盒子总行高为100+45+45=190<200px，父盒子高度/盒子个数=200/3 = 66px
则盒子2行高大于等于自身设定的高度(100>=100)，走b1路线，盒子2 高度将为100px；父盒子剩下的高度为200-100=100px
剩下两个盒子总行高为45+45=90<100px 父盒子高度/盒子个数=100/2=50px
则盒子3，盒子4，均不符合行高小于父盒子高度/盒子个数(45<50)，走b3路线，均分剩下的100px；每份50px；
最终结果将如下
如2：父盒高为300px，四个子盒子高为100px；行高分别设为80px，80px，80px，70px；总行高为80+80+80+70=310>300px；
则：盒子1，2,3行高小于自身设定的高度(80<100)，走a2路线，盒子1,2,3高度将为80px；父盒子剩下高度为300-240=60px；
剩下盒子总行高为70px>60px，
盒子4行高小于自身设定的高度(70<100)，走a2路线，盒子4高度将为行高即60px，最候结果如下：
如3：父盒高为300px，四个子盒子高为100px；行高分别设为57px，120px，30px，90px；总行高为57+120+30+90=297<300px；
则：盒子2行高大于等于自身设定的高度(120>100)，走b1路线，盒子1高度将为100px；父盒子剩下高度为300-100=200px；
剩下三个盒子总行高为57+30+90=177<200px，父盒子高度/盒子个数=200/3 = 66px;
则盒子4大于等于父盒子高/盒子个数且小于盒子设定的高度(100>90>66)，走b2路线，盒子2 高度将为行高90px；父盒子剩下的高度为200-90=110px
剩下两个盒子总行高为57+30=87<110px,父盒子高/盒子个数=100/2=50px
则盒子1大于等于父盒子高/盒子个数且小于盒子设定的高度(100>57>50)，走b2路线，盒子1 高度将为行高57px；父盒子剩下的高度为110-57=53px
剩下的盒子30<57/1,走b3路线，53分给盒子3
最终结果为 57px,100px 53px,90px；如图
基本验证无误，欢迎大家测试。实际布局中应该尽量避免大数值的行高设置。（其实这个测试很无聊）