弹性盒模型

Posted 2020-09-09 vsmart

1，弹性核模型

     新版父级display:flex;

     // 水平 方向 

     flex-direction:row;  

     // 竖直 方向

     flex-direction:colunm;

     

flex-direction: row-reverse;

flex-direction: column-reverse;

 

 

display: flex;

justify-content: flex-start/flex-end/center/space-between/space-around

 

justify-content: space-between;

 

justify-content: space-around;

 

垂直 ：display: flex;  align-items: flex-start/flex-end/center/baseline;

 

子级弹性空间：flex-grow: num;

子级排列顺序   order:num;

 

 

老版display:-webkit-box;

-webkit-box-orient:horizontal:

-webkit-box-orient:vertical:

display: -webkit-box;

-webkit-box-orient:vertical;

-webkit-box-direction:reverse;

display: -webkit-box;

-webkit-box-orient:vertical;

-webkit-box-direction:reverse;

 

display: -webkit-box;

-webkit-box-pack:start/end/justify/center;

 

 

-webkit-box-pack:justify;

 

垂直 ：display: -webkit-box; -webkit-box-align: start/end/center;

 

 

子级弹性空间：-webkit-box:num;

 

子级排列顺序   -webkit-box-ordinal-group:num;