What is Flex?
Flex 是 Flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。
W3C于2009年提出了這一方案，時至今日，常用的瀏覽器已經全部都提供了對它的支持（當然不包括IE8）。
Why to use Flex?
簡便的實現頁面布局。
How to use Flex?
為一個元素簡單地設置 display: flex; 就使得其成為Flex容器（flex container），其內部的所有子元素自動成為容器中的成員（flex item）。
容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做（main start），結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。
項目默認沿主軸水平排列。單個項目占據的主軸空間叫做main size，占據的交叉軸空間叫做cross size。
注意：
當一個元素設置為 display: flex; 后， 其子元素（即flex item）的float，clear和vertical-align屬性將無效。
對于Webkit內核的瀏覽器需要加上-webkit前綴。
Flex Container Attributes
-
flex-direction: row | row-reverse | column | column-reverse;
該屬性決定flex item在容器中的排列方向，默認為row，即水平從左 → 右排列；column為從 上 ↓ 下排列；加-reverse后綴，即和原先排列順序相反。 -
flex-wrap: nowrap | wrap | wrap-reverse;
該屬性決定flex item在容器中是否換行，換行的方式又是什么，默認為nowrap，即不換行。wrap為換行，當flex-direction為row時，內容從 上 ↓ 下按行排列；當flex-direction為column時，內容從 左 → 右按列排列；加-reverse后綴，即和原先排列順序相反。 -
flex-flow: <flex-direction> || <flex-wrap>
該屬性是flex-direction和flex-wrap的簡寫形式，默認值是原屬性flex-direction和flex-wrap的默認值，即row nowrap。 -
justify-content: flex-start | flex-end | center | space-between | space-around;
該屬性決定flex item在行內的水平對齊方式或列內的垂直對齊方式，默認值是flex-start。
flex-start： 與軸的start對齊，即左對齊(flex-direction: row)，上對齊(flex-direction: column)
flex-end：與軸的end對齊，即右對齊(flex-direction:row)，下對齊(flex-direction:column)
center： 與軸的的中點對齊
space-between：與軸的兩端對齊，flex-item之間的間隔都相等，頭尾的flex item緊貼軸的start位置
space-around：每個flex item兩側的間隔相等。所以，flex item之間的間隔比flex item與軸的start之間的間隔大一倍
注意：
flex item默認是沒有間距的，間距是由flex container的寬度或高度與flex item的寬度或高度之間的差產生的，即如果flex container的寬度為1000px，flex item的寬度為100px，container下有10個item，那無論justify-content設任何的值，展示都將是10個item緊貼地并列排列，item與item之間沒有任何間隙。 -
align-items: flex-start | flex-end | center | baseline | stretch;
該屬性與justify-content相反，決定flex item在行內的垂直對齊方式或列內的水平對齊方式，默認值是stretch。
flex-start：與軸的start對齊
flex-end：與軸的end對齊
center：與軸的的中點對齊
baseline： 與flex item的第一行文字的baseline對齊
stretch：如果flex item未設置寬度或高度或設為auto，將占滿這行的高度或這列的寬度
注意：
baseline屬性在container的flex-direction設置為column時無效。
當align-items屬性值設置為stretch時，如一個flex item設置了寬度或高度，則這個flex item應用flex-start，且只對該flex item生效。 -
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
該屬性類似于justify-content屬性，與之不同的是，該屬性決定flex item每行或每列在flex container下的對齊方式，如果flex item只有一行或一列，則該屬性無效，默認值為stretch。
flex-start：與軸的start對齊
flex-end：與軸的end對齊
center：與軸的中點對齊
space-between：與軸的兩端對齊，軸線之間的間隔都相等
space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍
stretch：軸線占滿整個交叉軸
注意：
當align-content屬性設定為flex-start、flex-end或center時，軸與軸之間默認是沒有間隔的。
Flex Item Attributes
-
order: <integer>;
該屬性定義flex item的排列順序，數值越小，排列越靠前，默認值為0。
注意：數值可以為負數。 -
flex-grow: <number>;
該屬性定義flex item的放大比例，默認值為0，即使有空余空間也不放大該元素。
注意：數值可以為小數，但不能為負數。 -
flex-shrink: <number>;
該屬性與flex-grow相反，定義flex item的縮小比例，默認值為1，即空間不足時，等比例縮小元素；flex-grow為0，則空間不足時也不縮小該元素。
注意：數值可以為小數，但不能為負數。 -
flex-basis: <length> | auto;
該屬性定義在分配剩余空間之前，flex item占所在軸的大小，默認值為auto，即原有元素大小。
注意：該屬性設定的大小為未分配剩余空間之前的大小，flex item最終顯示的大小會受flex-grow或flex-shrink的影響。 -
flex: auto | none | [ <flex-grow> <flex-shrink>? || <flex-basis> ];
該屬性是flex-grow、flex-shrink和flex-basis的簡寫，默認值為各屬性的默認值，0 1 auto。
該屬性還有2個快捷值：auto(1 1 auto), 即flex item根據container的內容大小自動縮放；none(0 0 auto)，即flex item保持自身元素大小，不進行縮放。 -
align-self: auto | flex-start | flex-end | center | baseline | stretch;
該屬性用來設置只用于自身的對齊方式，將覆蓋container的align-items屬性，默認值為auto，即繼承父屬性的align-items屬性。
TRY
俗話說的好，光說不練假把式，既然已經清楚了概念，我就嘗試使用這些特性，看到阮老師的另一篇文章后，自己也嘗試做了一遍，通過flex完成了骰子的6個面。
如果理解了flex容器的特性，那么上面的列子嘗試起來并不難，只有在第5點的時候遇到一些小障礙，如何畫中間那個點，最后是通過給第3個點增加兩邊的margin，使元素的寬度增加來處理。如果你也對這個有興趣可以參考這里，里面也有幾種不同的實現，或許對你也有所啟發，如果你有更好的想法，歡迎留言交流。
另外，在查資料時還發現CSS3 box-flex，一看描述和內容，完全和flex是同一個東西啊。
-
display: box：彈性模型第一版，不推薦使用（適用于老版本瀏覽器）。 -
display: flexbox：box升級版，不推薦使用（適用于老版本瀏覽器）。 -
display: flex：最新的彈性模型版本，推薦使用。
參考資料：
