CSS3彈性盒子是一種當前頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的佈局方式
引入彈性盒子佈局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間
2、CSS3彈性盒子內容
彈性盒子由彈性容器（Flex container）和彈性子元素（Flex item）組成
彈性容器透過設定display屬性的值為flex將其定義為彈性容器
彈性容器內包含了一個或多個彈性子元素
溫馨提示：彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內佈局
溫馨提示：彈性盒子預設橫向擺放
3、父元素上的屬性：
display屬性
display:flex;開啟彈性盒子
display:flex;屬性設定後子元素預設水平排列
flex-direction屬性
定義：flex-direction屬性指定了彈性子元素在父容器中的位置
語法：
flex-direction：row、row-reverse、column、column-reverse
row：橫向從左到右排列（左對齊），預設的排列
row-reverse：反轉橫向排列（右對齊，從後往前拍，最後一項排在最前面）
column：縱向排列
column-reverse：反轉縱向排列，從後往前排，最後一項排在最上面
justify-content屬性（垂直方向）
定義：內容對齊（justify-content）屬性應用在彈性容器上，把彈性項沿著彈性容器的主軸線（main axis）對齊
語法：
justify-content：flex-start（靠上）、flex-end（靠下）、center（中間）
flex-start：彈性專案向行頭緊挨著填充。這個是預設值。第一個彈性專案的main-start外邊距線被放置在該行的main-start邊線，而後續彈性項依次平齊擺放
flex-end：彈性專案向行尾緊挨著填充。第一個彈性項的main-end外邊距邊線被放置在該行的main-end邊線，而後續彈性項依次平行擺放
center：彈性專案居中緊挨著填充。（如果剩餘的自由空間是負的，則彈性專案將在兩個方向上同時溢位）
align-items屬性（水平方向）
定義：align-items設定或檢索引盒子元素在側軸（縱軸）方向上的對齊方式
語法：align-tems:flex-start（居左）、flex-end（居右）、center（居中）
flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界僅靠住該行的側軸起始邊界
flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界僅靠住該行的側軸結束邊界
center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢位相同的長度）
4、子元素上的屬性
flex-grow/flex
flex-grow根據彈性盒子元素所設定的擴充套件因子作為比率來分配剩餘空間
預設為0，即如果存在剩餘空間，也不大
如果只有一個子元素設定，那麼按擴充套件因子轉化的百分比對其分配剩餘空間。0.1即10%，1即100%，超出按100%
