flex盒子里面元素linehight对高度的影响

那天，高高兴兴的测试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；如图

　　　　基本验证无误，欢迎大家测试。实际布局中应该尽量避免大数值的行高设置。（其实这个测试很无聊）