CSS3中display屬性的Flex佈局-聖盃佈局實例

一，爲何寫這篇文章

在很早以前就接觸display：flex佈局，尤爲是不考慮低版本瀏覽器兼容以後，就開始肆無忌憚的使用了。以前作pc端的時候，要求兼容到ie8，也不會注意到它。後來作移動端，第一次看到display：flex，仍是從一個實習生的代碼裏，而後查了查資料，竟然是這麼方便。

---

簡單的使用及原理請查看阮一峯大神的講解。

---

二.基本使用

父元素

{
    display:flex;
}

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

能夠有6個屬性能夠設置，具體再也不細說。

子元素

{
    flex:none | auto; /* default auto */
}

/* 1表示該元素撐滿剩餘空間 */
{
    flex:1
}

我主要想說的是子元素的flex屬性，剛接觸時確實很差理解。理解了這個就能夠實現左固定右自適應的這種佈局，一般出如今列表顯示的時候。網上還一般見到flex：1 |none|auto 的這種寫法，就是下面這幾個屬性在做祟。

每一個子元素也稱爲 「項目」，屬性值有:

一、order  //定義各個子元素的排列順序，數值越小，排列越靠前，默認爲0，可爲負數
     

     .item{
         order:-1;/* 任意數字 */
     }

二、flex-grow  //定義子元素的放大比例，默認爲0（不放大），前提是父容器有空餘空間

.item{
         flex-grow: <number>; /* default 0 */
     }

三、flex-shrink  //若是全部項目的flex-shrink屬性都爲1，當空間不足時，都將等比例縮小。若是一個項目的flex-shrink屬性爲0，其餘項目都爲1，則空間不足時，前者不縮小。

負值對該屬性無效。

.item{
         flex-shrink: <number>; /* default 1 */
     }

四、flex-basis  //在子元素分配空餘空間前，設定指定的子元素的空間大小，默認auto（原值）

.item{
         flex-basis: <length> | auto; /* default auto */
     }
    /* 能夠設置60% 或者 200px */

五、flex  //是flex-grow、flex-shrink、flex-basis的組合，默認值flex:0 1 auto;

.item{
         flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
     }
     /* 該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto) */
     /* 建議優先使用這個屬性，而不是單獨寫三個分離的屬性，由於瀏覽器會推算相關值 */

六、align-self  //容許單個子元素與其餘子元素不同的對齊方式，能夠覆蓋父元素設定的align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，若是沒有父元素，則等同stretch（填充滿）。

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

咱們一般用到的就是這個flex屬性，在佈局的時候會頗有用。

---

對於這個屬性，最好是手動敲一下，嘗試一下各類值出現的效果。

三.聖盃佈局

layout佈局一直是css很重要的知識點，在面試中也會常常遇到，這裏就用flex作一個聖盃佈局。

css

*{
        margin: 0;
        padding: 0;
    }
    html,body{
        width: 100%;
        height: 100%;
    }
    body{
        display: flex;
        flex-direction:column;
    }
    .header,.footer{
        flex: 0 0 80px;
        background-color: #7dbcea;
    }
    .container{
        flex: auto;
        background-color: #145d9c;
        display: flex;
    }
    .container .left,.container .right{
        flex: 0 0 200px;
        background-color: #3a90ce;
    }
    .container .main{
        flex: auto;
        background-color: #145d9c;
    }

html

<div class="header"></div>
<div class="container">
    <div class="left"></div>
    <div class="main"></div>
    <div class="right"></div>
</div>
<div class="footer"></div>