彈性盒子常用屬性

添加瀏覽器前綴： -webkit-           也可用postCss自動添加

display:-webkit-flex;  *如果用了彈性布局，子元素不需要浮動，

-webkit-justify-content：      子元素水平排列方式方式。

　　　　　　　　center　　　　　　水平居中

　　　　　　　　space-between　　兩端對齊

　　　　　　　　space-around　　  手拉手平均分

　　　　　　　　flex-start　　　　　居左對齊

　　　　　　　　flex-end　　　　　 居右對齊

 

-webkit-align-items：　　     子元素垂直排列

　　　　　　　　center　　　　　　垂直居中

　　　　　　　　space-between　　上下兩端對齊

　　　　　　　　space-around　　  手拉手上下平均分

　　　　　　　　flex-start　　　　　頂部對齊

　　　　　　　　flex-end　　　　　 底部對齊

 

-webkit-flex-direction：　　   排列方式        

　　　　　　　　row　　　　　　　默認值  橫向排列

　　　　　　　　row-reverse　　　 橫向顛倒排列    *不常用

　　　　　　　　column　　　　　 垂直排列

　　　　　　　　column-reverse　  垂直顛倒排列    *不常用　 　　

 

-webkit-flex-wrap：      　　　默認no-wrap讓元素步換行

　　　　　　　　wrap　　　換行

　　　　　　　　nowrap　  不換行

 

-webkit-align-content:  　　　　　　　控制容器內多行在Y軸上的排列方式

　　　　　　　　stretch　　　　　　默認值

　　　　　　　　center　　　　　　 居中對齊

　　　　　　　　flex-start 　　 　　  頂部對齊

　　　　　　　　flex-end    　　　　 底部對齊

　　　　　　　　space-between　　 上下對齊

　　　　　　　　space-around　　　上下手拉手對齊

　　　　　　　　

子級

flex：1　　　　　1指的是一個系數 *子元素再划分父元素寬度，先刨除固定寬度

flex-grow：1　　  定義子元素放大比例