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；如圖

 

 

　　　　基本驗證無誤，歡迎大家測試。實際布局中應該盡量避免大數值的行高設置。（其實這個測試很無聊）