前言

Flexbox 是 flexible box 的簡稱（注：意思是“靈活的盒子容器”），是 CSS3 引入的新的佈局模式。它決定了元素如何在頁面上排列，使它們能在不同的螢幕尺寸和裝置下可預測地展現出來。

它之所以被稱為 Flexbox ，是因為它能夠擴充套件和收縮 flex 容器內的元素，以最大限度地填充可用空間。與以前佈局方式（如 table 佈局和浮動元素內嵌塊元素）相比，Flexbox 是一個更強大的方式：

自從用習慣flex佈局我基本已經不怎麼使用float了。

flex屬性繁多，但可以分為倆類：父容器的屬性和子項的屬性，所有的屬性值幾乎都和排列、對齊、佔地面積3類特性相關。

父容器屬性

子項屬性

父容器屬性詳解使用

flex-direction屬性

//定義子項在容器內的排列方向
flex-direction: row | row-reverse | column | column-reverse;

flex-wrap屬性

//定義子項在容器內的換行效果
flex-wrap: nowrap | wrap | wrap-reverse;

flex-flow屬性

//flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式
flex-flow: flex-direction || flex-wrap;

參考以上倆個屬性的寫法，這裡就此省略過了.....

justify-content屬性

//定義子項在容器內水平對齊方式
justify-content: flex-start | flex-end | center | space-between | space-around; 

align-items屬性

//定義子項在容器內垂直對齊方式
align-items: flex-start | flex-end | center | baseline | stretch;

tip：baseline: 專案的第一行文字的基線對齊。

align-content屬性

//定義多行子項在容器內整體垂直對齊方式，常用於多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

子項屬性詳解使用

Order屬性

//定義排列順序，數值小的排在前面。
order: <integer> 　　/* 傳入整數，default 0 */

flex-grow屬性

//定義子項寬度之和不足父元素寬度時，子項拉伸的比例
flex-grow: <number> 　　/*傳入數字，default 0 */

如果所有專案的flex-grow屬性都為1，則它們將等分父元素設定的空間（如果有的話）。如果一個專案的flex-grow屬性為2，其他專案都為1，則前者佔據的剩餘空間將比其他項多一倍。

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個子項消化。

　　按照收縮因子，加權綜合可得2501+2501+2501+2502+250*1=1500px；

　　於是我們可以計運算元項將被移除的溢位量是多少：

　　收縮因子為1的，被移除溢位量：(2501/1500)450，即等於75px。

　　收縮因子為2的，被移除溢位量：(2502/1500)450，即約等於150px。

　　最後實際寬度分別為：250-75=175px, 250-150=100px，四個flex-shrink 1等於700px，一個flex-shrink 2等於100px。

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。

flex屬性

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。
flex:none | <flex-grow>  <flex-shrink>  <flex-basis>

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。