flex是flexible box的縮寫，譯為“彈性佈局”，用來為盒模型提供最大的靈活性，任何一個容器都可以指定為flex佈局，只需要設置“display:flex即可；行內元素可以通過設置」display:inline-flex「實作；需要注意的是，如果設定了flex佈局，則子元素的float、clear和vertical-align屬性將會失效。
1. 基本概念
flex佈局是一種佈局模型，經常被稱之為flexbox，使用flex佈局之後，他會給子元素提供強大空間分配和對齊能力。
在沒有使用flex佈局之前，常用佈局有：流式佈局，浮動佈局，定位佈局等等。缺陷是子元素需要自己控制自己在父元素中的位置，也要注意父元素高度崩塌。
flex的優點就是避免不靈活的佈局形式，創建更多種佈局模式供你選擇，解決了子元素的對齊和分佈與響應式等問題。缺點是只能依靠自身的佈局模式，稍有變化則無法改變。
使用了flex佈局的元素，稱為flex容器（flex container），簡稱」容器「。它所有的子元素自動產生容器成員，稱為flex專案（flex item），簡稱」專案」；
容器預設存在兩根主軸：水平的主軸（main axis）和垂直的交叉軸（cross axis），主軸的開始位置（即邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的起始位置叫做cross start，結束位置叫做cross end。項目預設沿主軸排列，單一項目佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size。
CSS 中提供了以下屬性來實作Flex 佈局：
依照作用範圍的不同，這些屬性可以分為兩類，分別為容器屬性（flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content）和項目屬性（order、align -self、flex、flex-grow、flex-shrink、flex-basis）。下面就來介紹一下這些屬性的使用。
2. 容器的屬性
（1）flex-direction ：指定彈性盒子內子元素的排列方向；
屬性的可選值如下：
flex-direction屬性決定主軸的方向（即項目的排列方向）；
.box{flex-direction:row|row-reverse|column|column-reverse;}該屬性有4個值
● row（預設值）：主軸為水平方向，起點在左端；
●row-reverse：主軸為水平方向，起點在右端；
●column：主軸為垂直方向，起點在上沿；
●column-reverse：主軸為垂直方向，起點在下沿；
上述效果如下圖所示：
（2）flex-wrap ：指定彈性盒子內子元素的換行方式；
預設情況下，項目都排在一條線（又稱”軸線“）上，flex-wrap屬性定義，如果一條軸線排不下，如何換行，有以下三個取值：
.box{flex-wrap:nowrap|wrap|wrap-reverse}● nowrap（預設）：不換行，排列方式效果如圖：
●wrap：換行，第一行在上方，排列方式效果如圖：
●wrap-reverse：換行，第一行在下方，排列方式效果如圖：
（3）flex-flow ：此屬性作用於彈性盒容器，用於控制容器內元素的排列方向和換行方式，該屬性是一個複合屬性，由flex-direction和flex-wrap組成；
.box{flex-flow:<flex-direction><flex-wrap>;}（4）justify-content ：此屬性作用於彈性盒容器內的子元素，用於控制該子元素本身在排列方向上的分佈方式；
justify-content屬性定義了專案在主軸上的對齊方式
.box{justify-content:flex-start|flex-end|center|space-between|space-around;}該屬性有5個值：
● flex-start（預設值）：左對齊；
●flex-end：右對齊；
●center：居中；
●space-between：兩端對齊，項目之間的間隔都相等；
●space-around：每個專案兩側的間隔相等，所以專案之間的間隔比專案與邊框的間隔大一倍；
上述效果如下圖所示：
（5）align-items ：此屬性作用於彈性盒容器，用於控制彈性盒內所有子元素在排列方向的垂直方向上的對齊方式；
align-item屬性定義項目在交叉軸上如何對齊
.box{align-items:flex-start|flex-end|center|baseline|stretch;}此屬性有5個值，具體的對齊方式與交叉軸的方向有關，假設交叉軸從上到下：
●flex-start：交叉軸的起點對齊；
●flex-end：交叉軸的中點對齊；
●center：交叉軸的中點對齊；
●baseline：專案的第一行文字的基線對齊；
●stretch（預設值）：如果項目未設定高度或設定為auto，將佔滿整個容器的高度；
上述效果如下圖所示：
3. 項目的屬性
（1）order屬性
order 屬性用來設定項目在容器中出現的順序，您可以透過特定的數值來定義項目在容器中的位置，屬性的語法格式如下：
order:number;
其中number 是項目在容器中的位置，預設值為0。
舉例：
<!DOCTYPEhtml><html><head><style>.flex{display:flex;flex-flow:rowwrap;margin-top:10px;}.flexdiv{width:60px;height:60px;margin-bottom:5px; border:1pxsolidblack;}.flexdiv:nth-child(1){order:3;}.flexdiv:nth-child( 2){order:1;}.flexdiv:nth-child(3){order:2;}.flexdiv:nth-child(4){order:5;}.flexdiv:nth-child(5){order: 4;</style></head><body><div><div>A</div><div>B</div><div>C</div><div>D</div><div >E</div></div></body></html>運行結果：
（2）align-self屬性
align-s elf 屬性可讓您為某個項目設定不同於其它項目的對齊方式，該屬性可以覆寫align-items 屬性的值。 align-self 屬性的可選值如下：
舉例：
<!DOCTYPEhtml><html><head><style>.flex{display:flex;flex-flow:rowwrap;align-items:flex-end;border:1pxsolid#CCC;height:150px;}.flexdiv{width: 60px;height:60px;border:1 pxsolidblack;}.flexdiv:nth-child(3){align-self:flex-start;}</style></head><body><div><div>A</div><div>B</ div><div>C</div><div>D</div><div>E</div></div></body></html>運行結果：
（3）flex屬性
flex 屬性是flex-grow、flex-shrink 和flex-basis 三個屬性的簡寫，文法格式如下：
flex:flex-growflex-shrinkflex-basis;
參數說明如下：
● flex-grow：（必填參數）一個數字，用來設定項目相對於其他項目的成長量，預設值為0；
●flex-shrink：（選填參數）一個數字，用來設定項目相對於其他項目的收縮量，預設值為1；
●flex-basis：（選填參數）項目的長度，合法值為auto（預設值，表示自動）、inherit（表示從父元素繼承該屬性的值） 或以特定的值加%、px、em 等單位的形式。
另外，flex 屬性還有兩個快速值，分別為auto（1 1 auto）和none（0 0 auto）。
範例程式碼如下：
<!DOCTYPEhtml><html><head><style>.flex{display:flex;flex-flow:rowwrap;align-items:flex-end;border:1pxsolid#CCC;}.flexdiv{width:60px;height: 60px;border:1pxsolidblack;}.f lexdiv:nth-child(2){flex:0;}.flexdiv:nth-child(4){flex:11auto;}</style></head><body><div><div>A</div ><div>B</div><div>C</div><div>D</div><div>E</div></div></body></html>運行結果：
