弹性盒子常用属性

添加浏览器前缀： -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　　  定义子元素放大比例

转载于:https://www.cnblogs.com/xm16/p/10337456.html