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