彈性盒布局 ,屬于css3部分，ie9以下不支持，現(xiàn)代瀏覽器指的是就是ie9及以上
主要出現(xiàn)屬性：display：flex
塊元素與行元素的轉(zhuǎn)換
display:none;--------讓元素消失只厘，不占據(jù)空間位置
display:block;--------讓元素呈現(xiàn)塊元素特點(diǎn)
display:inlink;--------讓元素呈現(xiàn)行元素特點(diǎn)
display:inlink-block;------讓元素呈現(xiàn)行跟塊的特點(diǎn)
彈性盒布局
在父項(xiàng)可設(shè)置屬性：
display:flex;---------一定要設(shè)置的，是核心屬性描孟。如果要用彈性盒布局就要用愧薛。
flex-direction---定義彈性盒子項(xiàng)的排列方向
flex-direction:row--------水平
flex-direction:column-----豎直
flex-wrap:wrap;------讓子項(xiàng)換行
justify-content:center;---------在cross軸的中心（一般為豎直方向）
flex-end;-------在cross軸的底部
flex-strat;-------在cross軸的頂部
space-between;---圍繞著cross軸向兩邊分開，所有空白在子項(xiàng)之間掏愁。
space-around;-----圍繞著cross軸向兩邊分開歇由，所有空白平均分給子項(xiàng)，空白圍繞著子項(xiàng)果港。
當(dāng)設(shè)置了換行才生效沦泌。
align-items:center;--------在main軸的中心
flex-end;-------在main軸的底部
flex-strat;-------在main軸的頂部
flex-direction: column;----改變軸的方向
設(shè)置在子項(xiàng)：
flex:1---將空白的分配到子項(xiàng)，數(shù)值表示占據(jù)剩余空間的份數(shù)辛掠，這是簡寫
flex-grow:0;-----子項(xiàng)分配父級剩余空間的比
flex-shrink:1;-----子項(xiàng)的收縮所占的份數(shù)【當(dāng)所有子項(xiàng)相加的寬度大于父項(xiàng)的寬度谢谦，每個子項(xiàng)減少的多出寬度[]的1/n】
flex-basis:auto;-----子項(xiàng)寬度，也可以用百分比表示萝衩。
order:0;---------可以改變子項(xiàng)的順序回挽，可以設(shè)置成負(fù)值，值越小越靠前猩谊，默認(rèn)為0
align-self:center;--------子項(xiàng)在main軸的中心
flex-end;-------在main軸的底部
flex-strat;-------在main軸的頂部
