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

1、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：兩端對齊，項目之間的間隔都相等；

2、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 將會占滿整個容器的高度；

3、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：主軸在垂直方向上，起點在下沿；

4、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：換行，第一行在下方；

5、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。

6、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：默認值，軸線將占滿整個交叉軸；

7、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。

8、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，則前者占據的剩余空間將比其他項目多一倍。

9、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，則空間不足時，前者將不會縮小。

10、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 內容之后剩余的容器空間。

11、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）。

12、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