一、概念與定義
1.彈性盒子是CSS3引入的一種新的布局模式——Flexbox。
2.Flexbox布局叫做彈性盒布局或者伸縮布局盒模型。
3.CSS3 彈性盒（ Flexible Box 或 Flexbox），是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。
4.Flex是Flexible Box的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性。
5.任何一個容器都可以指定為Flex布局
.box{
??display:?flex;}
行內元素也可以使用Flex布局。
.box{
??display:?inline-flex;}
注意：設為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。
[if !supportLists]6.?[endif]Flexbox 作用：讓容器（父元素）有能力控制子項目（子元素）。
[if !supportLists]7.?[endif]采用Flex布局的元素，稱為Flex容器（flex container），簡稱”容器”。它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱”項目”。
[if !supportLists]8.?[endif]容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）（也叫側軸）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸（側軸）的開始位置叫做cross start，結束位置叫做cross end。
注意：項目默認沿主軸排列。
二、彈性盒相關屬性
1.彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。
2.彈性容器通過設置display 屬性的值為 flex 將其定義為彈性容器。
3.彈性容器內包含了一個或多個彈性子元素。
注意：彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內布局。
4.彈性子元素通常在彈性盒子內一行顯示。默認情況每個容器只有一行。
display:flex;
屬性1：flex-direction
flex-direction：創建主軸，定義伸縮項目在伸縮容器中的方向。
語法
flex-direction: row | row-reverse | column | column-reverse
flex-direction的值有:
row：橫向從左到右排列（左對齊），默認的排列方式。
row-reverse：反轉橫向排列（右對齊，從后往前排，最后一項排在最前面。
column：縱向排列。
column-reverse：反轉縱向排列，從后往前排，最后一項排在最上面。
屬性2：justify-content
justify-content：應用在彈性容器上，用來定義伸縮項目沿主軸現的對齊方式。
語法
justify-content: flex-start | flex-end | center | space-between | space-around
justify-content的值有:
flex-start：彈性項目向行頭緊挨著填充。這個是默認值。第一個彈性項的main-start 外邊距邊線被放置在該行的main-start邊線，而后續彈性項依次平齊擺放。
flex-end：彈性項目向行尾緊挨著填充。第一個彈性項的main-end外邊距邊線被放置在 該行的main-end邊線，而后續彈性項依次平齊擺放。
center：彈性項目居中緊挨著填充。（如果剩余的自由空間是負的，則彈性項目將在兩個 方向上同時溢出）。
space-between：彈性項目平均分布在該行上。如果剩余空間為負或者只有一個彈性項， 則該值等同于flex-start。否則，第1個彈性項的外邊距和行的main-start邊 線對齊，而最后1個彈性項的外邊距和行的main-end邊線對齊，然后剩余的彈性 項分布在該行上，相鄰項目的間隔相等。
space-around：彈性項目平均分布在該行上，兩邊留有一半的間隔空間。如果剩余空間為 負或者只有一個彈性項，則該值等同于center。否則，彈性項目沿該行分布，且 彼此間隔相等（比如是20px），同時首尾兩邊和彈性容器之間留有一半的間
（1/2*20px=10px）。
屬性3：align-items
align-items設置或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式。
語法
align-items: flex-start | flex-end | center | baseline | stretch
align-items的值有:
flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊 界。
flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒 子元素的尺寸，則會向兩個方向溢出相同的長度）。
baseline：如彈性盒子元素的行內軸與側軸為同一條，則該值與'flex-start'等效。其它 情況下，該值將參與基線對齊。
stretch：如果指定側軸大小的屬性值為'auto'，則其值會使項目的邊距盒的尺寸盡可能 接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制。
屬性3：flex-wrap
flex-wrap?:用于指定彈性盒子的子元素換行方式。
語法
flex-wrap: ?||
flex-wrap的值有:
nowrap?：默認，彈性容器為單行。該情況下彈性子項可能會溢出容器。
wrap?：彈性容器為多行。該情況下彈性子項溢出的部分會被放置到新行，子項內部會發生斷 行
wrap-reverse：反轉wrap排列，方向與wrap相反。
屬性4：align-content
align-content?:堆棧伸縮行。用于修改flex-wrap屬性的行為，設置各個行的對齊。
語法
align-content: flex-start | flex-end | center | space-between | space-around | stretch
align-content的值有:
stretch?:默認。各行將會伸展以占用剩余的空間。
flex-start?:各行向彈性盒容器的起始位置堆疊。
flex-end:各行向彈性盒容器的結束位置堆疊。
center?:各行向彈性盒容器的中間位置堆疊。
space-between?:各行在彈性盒容器中平均分布。
space-around?:各行在彈性盒容器中平均分布，兩端保留子元素與子元素之間間距大小的一半。
三、彈性子元素屬性
屬性1：排序order
order :加在子元素上，默認狀態按標準流的順序排列，在flexbox里可通過order：數值改變伸縮項 目的順序。
語法
order:
order：1——用整數值來定義排列順序，數值小的排在前面。可以為負值。
屬性2：align-self
align-self：用于設置彈性元素自身在側軸（縱軸）方向上的對齊方式。可覆蓋align-items的值。
語法
align-self: auto | flex-start | flex-end | center | baseline | stretch
