前言
Flexbox 是 flexible box 的簡稱（注：意思是“靈活的盒子容器”），是 CSS3 引入的新的布局模式。它決定了元素如何在頁面上排列，使它們能在不同的屏幕尺寸和設備下可預測地展現出來。
它之所以被稱為 Flexbox ，是因為它能夠擴展和收縮 flex 容器內的元素，以最大限度地填充可用空間。與以前布局方式（如 table 布局和浮動元素內嵌塊元素）相比，Flexbox 是一個更強大的方式：
自從用習慣flex布局我基本已經不怎么使用float了。
flex屬性繁多，但可以分為倆類：父容器的屬性和子項的屬性，所有的屬性值幾乎都和排列、對齊、占地面積3類特性相關。
1.父容器屬性
| 用於父元素的樣式 | 值 | 作用 | 特性分類 | |
| 1 | flex-direction | row、row-reverse、column、column-reverse | 定義子項在容器內的排列方向 | 排列 |
| 2 | flex-wrap | nowrap、wrap、wrap-reverse | 定義子項在容器內的換行結果 | 排列 |
| 3 | flex-flow | flex-flow是flex-direction和flex-wrap屬性的簡寫形式，默認值為row nowrap | flex-flow是flex-direction和flex-wrap屬性的簡寫形式，默認值為row nowrap | 排列 |
| 4 | justify-content | flex-start、center、flex-end、space-between、space-around | 定義子項在容器內水平對齊方式 | 對齊 |
| 5 | align-items | flex-start、center、flex-end、baseline、stretch | 定義子項在容器內的垂直對齊方式 | 對齊 |
| 6 | align-content | flex-start、center、flex-end、space-between、space-around、stretch | 定義多行子項在容器內整體垂直對齊方式 | 對齊 |
2.子項屬性
| 用於子元素的樣式 | 值 | 作用 | 特性分類 |
| order | 需整數integer |
屬性定義項目的排列順序。數值越小，排列越靠前，默認為0 | 排列 |
| flex-grow | <number> | 屬性定義子項寬度之和不足父元素寬度時，子項拉伸的比例，無需直接設置寬度 | 占地面積 |
| flex-shrink | <number> | 屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。負值對該屬性無效 | 占地面積 |
| flex-basis | number或百分比 | 屬性定義了在分配多余空間之前，項目占據的主軸空間它的默認值為auto，負值對該屬性無效 |
占地面積 |
| flex | 默認值為0 1 auto，后兩個屬性可選 |
是flex-grow, flex-shrink 和 flex-basis的簡寫 |
占地面積 |
| align-self | flex-start、center、flex-end、baseline、stretch | 屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch |
對齊 |
3.父容器屬性詳解使用
3.1flex-direction屬性
定義子項在容器內的排列方向
flex-direction: row | row-reverse | column | column-reverse; 
3.2 flex-wrap屬性
定義子項在容器內的換行效果
flex-wrap: nowrap | wrap | wrap-reverse;
3.3 flex-flow屬性
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式
flex-flow: <flex-direction> || <flex-wrap>;
參考以上倆個屬性的寫法，這里就此省略過了......
3.4 justify-content屬性
定義子項在容器內水平對齊方式
justify-content: flex-start | flex-end | center | space-between | space-around;
3.5 align-items屬性
定義子項在容器內垂直對齊方式
align-items: flex-start | flex-end | center | baseline | stretch;
tip：baseline: 項目的第一行文字的基線對齊。
3.6 align-content屬性
定義多行子項在容器內整體垂直對齊方式，常用於多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
3.子項屬性詳解使用
4.1 Order屬性
定義排列順序，數值小的排在前面。
order:<integer> /* 傳入整數，default 0 */
4.2 flex-grow屬性
定義子項寬度之和不足父元素寬度時，子項拉伸的比例
flex-grow: <number> /*傳入數字，default 0 */
如果所有項目的flex-grow屬性都為1，則它們將等分父元素設置的空間（如果有的話）。如果一個項目的flex-grow屬性為2，其他項目都為1，則前者占據的剩余空間將比其他項多一倍。
4.3 flex-shrink屬性
定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小，定義子項寬度之和超過父元素寬度時，子項縮放的比例。
flex-shrink：<number> /*default 1 */
說明：
flex-shrink的默認值為1，瀏覽器將超出的空間，按照收縮因子相加之后計算比率來進行空間收縮。
圖例中4定義了flex-shrink:2，其余子項定義了flex-shrink:1，這樣可以看到總共將剩余空間分成了6份，4個1份，1個2份，即1:1:1:2:1。
假設我們給父容器width定義為800px，每個子項的width被定義為250px，5個子項相加之后即為1250px，超出父容器450px。那么這么超出的450px需要被這5個子項消化。
按照收縮因子，加權綜合可得250*1+250*1+250*1+250*2+250*1=1500px；
於是我們可以計算子項將被移除的溢出量是多少：
收縮因子為1的，被移除溢出量：(250*1/1500)*450，即等於75px。
收縮因子為2的，被移除溢出量：(250*2/1500)*450，即約等於150px。
最后實際寬度分別為：250-75=175px, 250-150=100px，四個flex-shrink 1等於700px，一個flex-shrink 2等於100px。
4.4 flex-basis屬性
定義子項的初始寬度，若子項寬度之和超過父元素寬度時，子項按照flex-basis的比例縮放
flex-basis：<length> | <percentage>; /* default auto*/
說明：
flex-basis的默認值為auto（無特定寬度值，取決於其它屬性值），瀏覽器將超出的空間，按照各子項basis的值的比例進行空間收縮。
圖例中5定義了flex-basis:400px，其余子項定義了flex-basis:200px，假設我們給父容器width定義為800px，5個子項相加之后即為1200px，超出父容器400px。那么這么超出的400px需要被這5個子項消化。
這5個子項的比例為1:1:1:1:2，則多出來的400px要被分為6份，於是我們可以計算子項將被移除的溢出量是多少：
flex-basis為400px的，被移除溢出量：400/6*2，即約等於133.33px。
flex-basis為200px的，被移除溢出量：400/6*1，即約等於66.67px。
最后實際寬度分別為：400-133.33=266.67px, 200-66.67=133.33px，前四個都是133.33px，最后一個是266.67px。
4.5 flex屬性
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。
flex:none | <flex-grow> <flex-shrink> <flex-basis>
4.6 align-self屬性
定義單個子項與其他項目不一樣的對齊方式
align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋父容器的align-items屬性。默認值為auto，表示繼承父容器的align-items屬性，如果沒有父容器，則等同於stretch。
align-self: auto | flex-start | flex-end | center | baseline | stretch; /*該屬性可能取6個值，除了auto，其他都與align-items屬性完全一致。*/
圖例中父容器設置了align-items:flex-start，然后我們單獨給5設置了align-self:flex-end。
如需要更深入了解flex布局，請參考阮一峰博文——Flex 布局教程：實例篇