CSS3-flex彈性布局之flex屬性

前置

flex大致分為兩類屬性：容器屬性和項目屬性（容器內部項目的屬性）。
這里的flex屬性如flex：1就給容器內部項目的設置屬性。

示例

html

    <div id="wrap">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

解釋

這里的wrap就是容器，item我們稱作項目。

我們還需要知道flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。
接下來我們逐一介紹這三個屬性:
1.flex-grow
2.flex-shrink
3.flex-basis

flex-grow

flex grow屬性設置flex容器中的可用空間應分配給該項的大小。
如果所有同級項目都具有相同的值，則所有項目將獲得相同的可用空間份額，否則將根據定義的不同比率進行分配。
示例

css

        :root {
            background-color: #fff;
            --border: 1px solid #ccc;
            --dashedBorder: 1px dashed #eee;
        }

        #wrap {
            display: flex;
            flex-direction: row;
            margin: 0 auto;
            width: 500px;
            height: 500px;
            border: var(--dashedBorder);
            background-color: aquamarine;
        }

        .item {
            height: 50px;
            border: var(--border);
            background-color: pink;
        }

        #wrap>div:nth-child(1) {
            flex-grow: 1;
        }

        #wrap>div:nth-child(2) {
            flex-grow: 2;
        }

        #wrap>div:nth-child(3) {
            flex-grow: 1;
        }

html

    <div id="wrap">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

效果

解釋

從左到右三個紅色方塊的寬度依次為48.5 + 97 + 48.5 = 194，加上6個邊框剛好200。
三個item按照1:2:1的比例占滿了容器。

上面我們並沒有給item添加寬度，如果我們給它們加上width會怎么計算呢？
示例

css

        .item {
            width: 50px;
            height: 50px;
            border: var(--border);
            background-color: pink;
        }

效果

解釋

我們通過控制台查看三個item的寬度從左到右依次是61 + 72 + 61 = 194，加上6個邊框剛好200。但是三個元素並不是按照1:2:1的比例分配的。這是為什么呢？我們仔細看定義后知道，我們給wrap設置了width為200px，三個item設置了50px，所以剩余的是50px，剩余的50px按照1:2:1的比例又分別分配給了三個width為50px的item。 注意這個比例是剩余空間分配的分配比例，而不是分配后元素自身的比例。

flex-shrink

設置項目的收縮比例，如果空間不足，該項目將縮小。
默認值為1。

flex-basis

說明：
設置或檢索彈性盒伸縮基准值。
如果所有子元素的基准值之和大於剩余空間，則會根據每項設置的基准值，按比率伸縮剩余空間。
取值：
用長度值來定義寬度，不允許負值。
用百分比來定義寬度，不允許負值。
auto：無特定寬度值，取決於其它屬性值。
content：基於內容自動計算寬度。

flex屬性

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫。
取值：
如果縮寫flex: 0 auto或者flex: initial, 則其計算值為0 1 auto（默認值）。
如果縮寫flex: 1, 則其計算值為1 1 0%。
如果縮寫flex: auto, 則其計算值為1 1 auto。
如果縮寫flex: none, 則其計算值為0 0 auto。

完------🍃