flex屬性

定義

flex佈局包括最外層的容器和內部的元素，flex屬性是內部元素屬性。flex屬性是flex-grow, flex-shrink, flex-basis三個屬性的簡寫

　　flex-grow

　　設定元素佔flex容器所剩空餘空間的比例

　　flex-shrink

　　設定元素的收縮倍數，當元素的預設尺寸大於flex容器時，元素根據flex-shrink值縮小尺寸。

　　flex-basis

　　在不設定box-sizing屬性的情況下，flex-basis設定flex元素的內容區（content box）的初始尺寸。

　　如果一個元素同時設定了flex-basis與width（如果flex-direction：column那麼就是height）屬性，flex-basis有更高的優先順序

名詞解釋

主軸：flex-direction設定主軸方向，預設值為row，對應的主軸尺寸為width值（如果flex-direction是column那麼主軸尺寸為height值）

父容器尺寸：外部容器在主軸上的尺寸（此例中為width值）

初始佔用空間：內部元素設定好flex屬性後，會有初始指定的佔用空間

剩餘可分配空間：父容器尺寸 - 初始總佔用空間（所有內部元素的初始佔用空間）

例項講解

<div class="parent">
 

    <div class="item-1"></div>
    <div class="item-2"></div>
    <div class="item-3"></div>
</div>

<style type="text/css">
    .parent {
        display: flex;
        width: 600px;
    }
    .parent > div {
        height: 100px;
    }
    .item-1 {
        width
 
: 140px;
        flex: 2 1 0%;
        background: blue;
    }
    .item-2 {
        width: 100px;
        flex: 2 1 auto;
        background: darkblue;
    }
    .item-3 {
        flex: 1 1 200px;
        background: lightblue;
    }
</style>

 執行結果

初始值

主軸上父容器總尺寸： 600px（此例中主軸為x軸，主軸尺寸為width）

• item-1的初始佔用空間為 0%    即0px
• item-2的初始佔用空間為 auto  即 100px（元素flex-basis設定為auto時，元素初始尺寸為width）
• item-3的初始佔用空間為 200px 

子元素的總初始佔用空間： 0px + 100px + 200px = 300px

剩餘空間分配

剩餘空間 ：600px - 300px = 300px

元素的放大係數由flex-grow決定，放大係數和為 item-1 (2) + item-2 (2) + item-3 (1) = 5

• item-1 剩餘分配空間  2/5 * 300px = 120px
• item-2 剩餘分配空間  2/5 * 300px = 120px
• item-3 剩餘分配空間  1/5 * 300px = 60px

每個元素的最終width = 初始佔用空間 + 剩餘分配空間

• item-1   120px + 0px = 120px
• item-2  100px + 120px = 220px
• item-3  200px + 60px = 260px