flex佈局（彈性佈局）

pro-xiaoy發表於2018-02-06
Flex

flex佈局（彈性佈局）

很久之前在阮一峰老師的隨筆上就看到了他對這個屬性的瞭解，有興趣的同學可以參考他的部落格

Flex 佈局教程：語法篇

一.基本概念

採用 Flex 佈局的元素，稱為 Flex 容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為 Flex 專案（flex item），簡稱"專案"。
無論你內部屬性如何變化，記住父級容器加入屬性： display:flex;

二. 容器的屬性

2.1 flex-direction屬性 [flex-方向]

flex-direction屬性決定主軸的方向（即專案的排列方向）。
    .box{
        display: flex;        // 重點程式碼
        flex-direction: row;  // 主軸為水平方向，起點在左端(從左到右)
        width: 100px;
        border: 1px solid #cccccc;
    }
    .item{
        width: 30px;
        height: 30px;
        background: #ff00ff;
        margin: 10px;
    }
複製程式碼
        row（預設值）：主軸為水平方向，起點在左端。--從左到右
        row-reverse：主軸為水平方向，起點在右端。---從右到左
        column：主軸為垂直方向，起點在上沿。     ---從上到下 
        column-reverse：主軸為垂直方向，起點在下沿。---從下到上
    <!---------  在不設定子元素或者是父元素的margin和padding是沒有的      -------->
複製程式碼

2.2 flex-wrap屬性 [flex-包/纏繞]

預設情況下，專案都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。(很牛逼的屬性牛逼的不行)
    nowrap（預設）：不換行。(當你的父級元素寬度低於內部元素寬度.他會自動適配寬度調節到最佳)
    wrap：換行，第一行在上方。(普通的，但是他還是從左往右的排序，尊重你設定的內部元素寬度)
    wrap-reverse：換行，第一行在下方。（超級騷氣和warp很象但是頭尾換了過來，具體頁面具體對待）
    <!--------    同樣的demo直接把上面css中的flex-direction換掉就可以   ------------>
複製程式碼

2.3 flex-flow [flex-流(理解為流水吧)]

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。

    .box { flex-flow: <flex-direction> || <flex-wrap>; }
           flex-flow: row nowrap;
    <!-- 官網的demo其實是這個意思，後面可以跟兩個引數對flex-direction/flex-wrap 後面的值--->
複製程式碼

2.4 justify-content屬性 [證明內容]

justify-content屬性定義了專案在主軸上的對齊方式。[同理利用上面的css樣式做實驗]
    .box {
        justify-content: flex-start | flex-end | center | space-between | space-around;
    }
    flex-start（預設值）：左對齊   --很像flex-direction:row
    flex-end：右對齊
    center： 居中                 -- text-align:center
    space-between：兩端對齊，專案之間的間隔都相等。
    space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。
複製程式碼

2.5 align-items屬性 [類似於豎著的justify-content][排列專案]

align-items屬性定義專案在交叉軸上如何對齊。

這個屬性想要看出來在父級容器上加入高度

    .box {
        align-items: flex-start | flex-end | center | baseline | stretch;
    }
    flex-start：交叉軸的起點對齊。
    flex-end：交叉軸的終點對齊。
    center：交叉軸的中點對齊。
    baseline: 專案的第一行文字的基線對齊。
    stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。
    <!-----   這一段是真的很好看懂--！可以好好參考   ----->
複製程式碼

2.6 align-content屬性

align-content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。

    .box {
        align-content: flex-start | flex-end | center | space-between | space-around |  stretch;
    }
    flex-start：與交叉軸的起點對齊。
    flex-end：與交叉軸的終點對齊。
    center：與交叉軸的中點對齊。
    space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。
    space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
    stretch（預設值）：軸線佔滿整個交叉軸。

複製程式碼

3. 專案的屬性

3.1 order屬性[改變順序]

    //  一排div改變順序
    .box{
            display: flex;
    }
    .order{
        order: -1;
    }
複製程式碼

3.2 flex-grow屬性

flex-grow屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。

    //  改變比例有點像col-lg-x這個一說基本都懂
    .box{
        display: flex;
    }
    .item{
        flex-grow：4
    }
複製程式碼

3.3 flex-shrink

如果所有專案的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個專案的flex-shrink屬性為0，其他專案都為1，則空間不足時，前者不縮小。負值對該屬性無效。

    .item{
        flex-shrink: 1;
    }
複製程式碼

3.4 flex-basis屬性

flex-basis屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小

    .item{
        flex-basis: 264px;   // 不會超出父級寬度。
    }
複製程式碼

3.5 flex屬性

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。

    .item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }
複製程式碼

3.6 align-self屬性

align-self屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。

.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }

    .box{
        display:flex;
        height: 400px;
    }
    item{
        align-self: flex-end;
    }
複製程式碼

其實後面有點寫的不夠謹慎了基本都是複製阮一峰老師的文字了。如若覺得有點幫助可以點個贊。

相關文章