彈性盒-flex布局
彈性盒是css3的一種新的布局模式
CSS3彈性換盒，是一種當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時(shí)確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健?br> 引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個(gè)容器中的子元素進(jìn)行排列、對齊和分配空白空間
display:flex 設(shè)置子元素為彈性盒 來顯示/父元素
子元素在同一行之內(nèi)顯示
即使有溢出內(nèi)容，也不會(huì)換行
float、display:block不再生效
justify-content:center 控制子元素主軸對齊方式【居中】
align-items:center 控制子元素側(cè)軸對齊方式【居中】
display:box 是老彈性盒；display:flex是新彈性盒
display:inline-flex 新彈性盒，專注于行內(nèi)元素
word-break:break-all;強(qiáng)制文本換行
父元素：display:flex;（對于父元素沒有任何影響）
對齊方式：主軸justify-content:center 居中對齊
flex-start 頂端對齊
flex-end 底端對齊
space-between 兩端對齊【沒有空隙】
space-around 兩端對齊【兩邊距離是中間的一半 1/2】
側(cè)軸：align-items:center 側(cè)軸居中
flex-start頂端對齊
flex-end 底端對齊
baseline 基線對齊
排列方式:flex-direction:column 垂直排列 [子元素的方向就會(huì)發(fā)生改變]
column-reverse 垂直翻轉(zhuǎn)排列
row 水平排列【默認(rèn)值】
row-reverse 水平翻轉(zhuǎn)排列
flex:1;表示子元素分配父元素的剩余空間【子元素】
彈性盒不能和多欄布局混淆使用
Cursor：用于設(shè)置鼠標(biāo)狀態(tài) pointer小手狀態(tài)
Wait 加載狀態(tài)
move移動(dòng)狀態(tài)
多行彈性盒
彈性盒的優(yōu)先級高于width
Flex-wrap:wrap;控制子元素溢出內(nèi)容是否換行顯示【加給父元素】 wrap表示換行 nowrap表示不換行【默認(rèn)值】
wrap-reverse【翻轉(zhuǎn)換行】
flex-flow:復(fù)合屬性
是flex-direction和flex-wrap的復(fù)合屬性，表示控制子元素的排列方式以及是否換行
加給父元素的屬性：
Display:flex display:inline-flex display:box
對齊方式:
主軸Justify-content:center、
flex-start、
flex-end 、
space-between、
space-around
側(cè)軸：align-items:center、
flex-start、
flex-end、
baseline
排列方式：flex-direction:column、
column-reverse、
row、
row-reverse
是否換行：flex-wrap:wrap、
nowrap、
wrap-reverse
復(fù)合屬性：flex-flow:flex-wrap、
flex-direction
加給子元素的屬性：
flex:1;
flex-grow:;
設(shè)置或檢索彈性盒的擴(kuò)展比率(根據(jù)彈性盒子元素所設(shè)置的擴(kuò)展因子作為比率來分配剩余空間)默認(rèn)值0，不參與分配
flex-shrink:;
設(shè)置或檢索彈性盒的收縮比率(根據(jù)彈性盒子元素所設(shè)置的收縮因子作為比率來收縮空間)默認(rèn)值1
flex-basis:;
設(shè)置或檢索彈性盒伸縮的基準(zhǔn)值（如果所有子元素的基準(zhǔn)值之和大于剩余空間，則會(huì)根據(jù)每項(xiàng)設(shè)置的基準(zhǔn)值，按比例伸縮剩余空間）
Order:控制元素的顯示次序，order值越大，排列越靠后
單行省略號不能和彈性盒同時(shí)使用