flexbox layout

flexbox 的簡介：

            flexbox 是 2009 年 W3C 提出的一種全新的可伸縮的 CSS 佈局方式。依賴 flexbox，咱們能夠更簡單，高效的完成可伸縮式頁面的佈局。flexbox 一共經歷了三個版本，分別爲 old，tweener，new，這三種版本下的 display 屬性值不同，分別爲 "display: box"，"display: flexbox"，"display: flex"。flexbox 中有兩個很是重要的概念：flex container（flex 容器） 和 flex item（flex 項目），當咱們給一個元素添加一個 "display: flex" 屬性後，這個元素就會變成一個 flex container ，它的直接子元素就會變成 flex item 成爲一個 flex container 成員。特別是當咱們給一個元素設置成 flex container 時，會在文檔中生成一個伸縮容器，伸縮容器會爲子元素內容生成一個伸縮容器上下文（FFC）。伸縮容器不是塊容器，因此 flex item 不能使用那些用來控制塊元素佈局的屬性，例如，clear，float，vertical-align 屬性。

PS：flex container 默認存在兩根軸線：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫作 main start，結束位置叫作 main end；交叉軸的開始位置叫作  cross start，結束位置叫作 cross end。flex 項目默認沿主軸排列。單個項目佔據的主軸空間叫作 main size，佔據的交叉軸空間叫作 cross size。

flexbox 的屬性分爲兩類： 一類爲 flex 容器的屬性，另外一類爲 flex 項目的屬性。

            flexbox 容器的屬性：

                            justify-content

                            align-items

                            flex-direction

                            flex-wrap

                            flex-flow

                            align-content

            flexbox 項目的屬性：

                            order

                            flex-grow

                            flex-shrink

                            flex-basis

                            flex

                            align-self

一、justify-content  用來設置 flex item 在主軸方向上的對齊方式

具體示例：
#container {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        justify-content: center;
}
.item {
        width: 100px;
        height: 200px;
        border: 1px solid #000;
}

justify-content 屬性的值有：flex-start | flex-end | center | space-around | space-between。
        flex-start：默認值，flex container 內全部的 flex item 在主軸上按從左至右方向排列（左對齊）；
        flex-end：flex container 內全部的 flex item 在主軸上按從右至左方向排列（右對齊）；
        center：flex container 內全部的 flex item 在主軸上居中對齊；
        space-around：每一個 flex item 兩側的間隔相等而且項目之間的間隔比項目與邊框的間隔大一倍；
        space-between：兩端對齊，項目之間的間隔都相等；

二、align-items  用來設置 flex item 在交叉軸方向上的對齊方式

具體示例：
#container {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        align-items: center;
}
align-items 屬性的值有：flex-start | flex-end | center | baseline | stretch。
        flex-start：flex container 內全部的 flex item 在交叉軸上按從上至下方向排列（頂部對齊）；
        flex-end：flex container 內全部的 flex item 在交叉軸上按從下至上方向排列（底部對齊）；
        center：flex container 內全部的 flex item 在交叉軸上居中對齊；
        baseline：全部 flex item 中的第一行文字的基線對齊；
        stretch：默認值，若是 flex item 沒有設置高度或爲 auto，flex item 將會佔滿整個容器的高度；

三、flex-direction  用來設置主軸的方向

具體示例：
#container {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        flex-direction: column;
}
flex-direction 屬性的值有：row | row-reverse | column | column-reverse。
        row：默認值，主軸在水平方向上，起點在左端；
        row-reverse：主軸在水平方向上，起點在右端；
        column：主軸在垂直方向上，起點在上沿；
        column-reverse：主軸在垂直方向上，起點在下沿；

四、flex-wrap  用來設置 flex item 是否進行多行並反轉排列

具體示例：
#container {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        flex-wrap: wrap;
}
flex-wrap 屬性的值有：nowrap | wrap | wrap-reverse。
        nowrap：默認值，全部的 flex item 排列在一條水平的軸線上，不換行；
        wrap：換行，第一行在上方；
        wrap-reverse：換行，第一行在下方；

五、flex-flow 屬性是 flex-direction 屬性和 flex-wrap 屬性的簡寫形式，默認值爲 row nowrap

具體示例：
#container {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        flex-flow: column-reverse wrap-reverse;
}
flex-flow 屬性的值有：row | row-reverse | column | column-reverse | nowrap | wrap | wrap-reverse。

六、align-content 屬性定義了多根軸線的對齊方式，若是容器只有一根軸線，該屬性不起做用

具體示例：
#container {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        align-content: center;
}
align-content 屬性的值有：flex-start | flex-end | center | space-around | space-between | stretch。
        flex-start：與交叉軸的起點對齊；
        flex-end：與交叉軸的終點對齊；
        center：與交叉軸的中點對齊；
        space-around：每根軸線的兩側間隔相等，而且軸線之間的間隔比軸線與邊框的間隔大一倍；
        space-between：與交叉軸的兩端對齊，而且軸線之間的間隔都相等；
        stretch：默認值，軸線將佔滿整個交叉軸；

七、order 屬性用於調整 flex item 的順序（數值越大，排列越靠後）

具體示例：
#container {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
}
.item {
        width: 100px;
        height: 200px;
        border: 1px solid #000;
        order: 1;
}
order 屬性的值有：-1 | 0 | 1 |  integer，默認值爲 0。

八、flex-grow 屬性用於定義 flex item 的放大比例（設置負值無效）

具體示例：
#container {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
}
.item {
        width: 100px;
        height: 200px;
        border: 1px solid #000;
        flex-grow: 1;
}
flex-grow 屬性的值：number，默認值爲 0，即存在剩餘空間也不放大。
PS：若是全部 flex item 的 flex-grow 屬性值都爲 1，則它們將等分剩餘空間（若是有的話）。若是一個項目的 flex-grow 屬性值爲 2，其餘項目都爲 1，則前者佔據的剩餘空間將比其餘項目多一倍。

九、flex-shrink 屬性用於定義 flex item 的縮小比例（設置負值無效）

具體示例：
#container {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
}
.item {
        width: 100px;
        height: 200px;
        border: 1px solid #000;
        flex-shrink: 1;
}
flex-shrink 屬性的值：number，默認值爲 1，即空間不足該項目將縮小。
PS：若是全部項目的 flex-shrink 屬性值都爲 1，當空間不足時，都將等比例縮小。若是一個項目的flex-shrink 屬性值爲 0，其餘項目都爲 1，則空間不足時，前者將不會縮小。

十、flex-basis 屬性用於定義 flex item 佔據主軸空間的大小

具體示例：
#container {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
}
.item {
        width: 100px;
        height: 200px;
        border: 1px solid #000;
        flex-basis: 100%;
}
flex-basis 屬性的值：length，默認值爲 auto，即項目的原本大小。也能夠設置固定值，如500px。
特別注意當 flex-basis 值爲 0 時 flex item 分配的是容器全部的空間；當 flex-basis 值爲 auto 時 flex item 分配的是容器減去全部 flex item 內容以後剩餘的容器空間。

十一、flex 屬性是 flex-grow，flex-shrink 和 flex-basis 屬性的簡寫形式，默認值爲 0 1 auto

具體示例：
#container {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
}
.item {
        width: 100px;
        height: 200px;
        border: 1px solid #000;
        flex: 1 100%;
}
flex 屬性的值有兩個縮寫 none（0 0 auto），auto（1 1 auto）。

十二、align-self 屬性用於設置單個項目與其餘的項目不同的對齊方式，可覆蓋容器的 align-items 屬性

具體示例：
#container {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
}
.item {
        width: 100px;
        height: 200px;
        border: 1px solid #000;
        align-self: flex-end;
}
align-self 屬性的值有：flex-start | flex-end | center | baseline | stretch | auto。
        flex-start：flex container 內全部的 flex item 在交叉軸上按從上至下方向排列（頂部對齊）；
        flex-end：flex container 內全部的 flex item 在交叉軸上按從下至上方向排列（底部對齊）；
        center：flex container 內全部的 flex item 在交叉軸上居中對齊；
        baseline：全部 flex item 中的第一行文字的基線對齊；
        stretch：若是 flex item 沒有設置高度或爲 auto，flex item 將會佔滿整個容器的高度；
        auto：默認值，繼承容器的 align-items 屬性。若是容器沒有該屬性，則等同於 stretch；

PS：一個好玩的 flexbox 學習網站：http://flexboxfroggy.com/#zh-cn

       flexbox bugs 問題及解決方法：https://github.com/philipwalton/flexbugs