彈性盒子布局(flex布局)

彈性盒子布局方式：
.box{
display:flex;
}
@設為Flex布局后，子元素的float、clear和vertical-align屬性將失效
@采用 Flex 布局的元素，稱為 Flex 容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為 Flex 項目（flex item），簡稱"項目"。
@容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。
項目默認沿主軸排列。單個項目占據的主軸空間叫做main size，占據的交叉軸空間叫做cross size。
/**容器屬性設置**/
1.flex-direction屬性
決定主軸的方向（即項目的排列方向）
//水平方向
row(默認值） 主軸方向為水平方向，起點在左端
row-reverse 主軸方向為水平方向，起點在右端
//垂直方向
column 主軸方向為垂直方向，起點在上沿
column-reverse 主軸方向為垂直方向，起點在下沿
2.flex-wrap屬性
默認情況下，項目都排在一條線（又稱“軸線”）上。
flex-wrap屬性定義了，如果一條軸線排不下，如何換行
nowrap(默認) 不換行
wrap 換行，第一行在上方
wrap-reverse 換行，第一行在下方
3.flex-flo屬性：
是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap
4.justify-content屬性
justify-content屬性定義了項目在主軸上的對其方式
flex-start(默認值） 左對齊
flex-end 右對齊
center 居中
space-between 兩端對齊，項目之間的間隔都相等
space-around 每個項目兩側的間隔相等，所以，項目之間的間隔比項目與邊框的間隔大一倍
5.align-items屬性
定義項目在交叉軸上如何對其
flex-start 交叉軸的起點對齊
flex-end 交叉軸的終點對齊
center 交叉軸的中點對齊
baseline 項目的第一行文字的基線對齊
stretch(默認值) 如果項目未設置高或設為auto，將占滿整個容器的高度
6.align-content屬性
定義了多根軸線的對齊方式，如果項目只有一根軸線，該屬性不起作用
flex-start 與交叉軸的起點對齊
flex-end 與交叉軸的終點對齊
center 與交叉軸的中點對齊
space-between 與交叉軸兩端對齊，軸線之間的間隔平均分布
space-around 每根軸線兩側的間隔都相等，所以軸線之間的間隔比軸線與邊框的間隔大一倍
stretch(默認值) 軸線占滿整個交叉軸

/**項目屬性**/
order:定義項目排列的順序。數值越小，排列越靠前，默認為0
flex-grow:定義項目的放大比例，默認為0，如果存在空白部分，也不會放大
flex-shrink:定義了項目的縮小比例，默認為1，如果空間不足，該項目將縮小
flex-basis:定義了在分配多余空間之前，項目占據的主軸空間(main size)。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目本來的大小
flex:是flex-grow,flex-shrink和flex-basis的簡寫，默認值為0 1 auto，后兩個屬性可選
align-self:允許單個的項目有與其他項目不一樣的對齊方式，可覆蓋align-item屬性。默認為auto，表示繼承父元素的align-item屬性,如果沒有父元素，則等同於stretch