display:box;display:webkit-box;display:moz-box;
display:flex;display:webkt-flex;
两者都属于弹性盒子布局,前者是09年开始的,而后者是12年开始进行的。但是在使用的时候,后者还不能完全代替前者,所以为了浏览器的兼容,最好都写上。今天主要来认识一下display:flex;它能很好的解决前端页面居中问题。首先在父容器中声明,display:flex;display:webkt-flex;然后我们来看看父容器属性控制:
1.flex-dirextion:row||row-reverse||column||column-reverse; //父容器里面的子排列方式,默认是row
2.flex-wrap:nowrap||wrap||wrap-reverse; //当父容器的子很多的时候,设置是否分行,默认是nowrap不分行
flex-flow: //是1,2属性的结合
3.justify-content:flex-start||flex-end||center||space-bteween||space-around;//表示对父容器中子在横向富余空间的划分
4.align-content:flex-start||flex-end||center||space-bteween||space-around||stretch;//表示对父容器中子在纵向富余空间的划分
5.align-items:flex-start||flex-end||center||baseline||stretch;//表示对父容器子在纵向富余空间的划分
子容器属性控制:
1.order:-1||0||1; //默认是0,数值越小item越靠前
2.flex-grow:0||1||2; //默认是0,都是1表示将父剩余空间平分,如果有一个是2则是该空间是其他的两倍,这个特效可以用来做手风琴特效
3.flex-shrink:0||1||2;//默认是1,当项目缩小时,设置1的都跟着缩小,而设置0的不缩小
4.flex-basis:
flex:1 0 auto //是2,3,4的结合
5.align-self:flex-start||flex-end||center||baseline||stretch //设置单个子容器纵向布局