flexbox前綴

.box{web

display: -webkit-box;flex

display: -moz-box;flexbox

display: -ms-flexbox;spa

display: -o-box; zepto

display: box; 文檔

display: -webkit-flex;it

display: flex; io

}class

Jquery.js <——> zepto.js容器

  

 

 

  -webkit-box-flex: 1;

  -moz-box-flex: 1;

  -ms-flex: 1;

  width: 50%;

  -webkit-flex: 1;

  flex: 1;

  /*父元素-橫向排列(主軸)*/         display:box;  (伸縮盒最老版本)   display:-webkit-box;  /* iOS 6-, Safari 3.1-6 */   display:-webkit-flex; /* Chrome */   display:-moz-box;     /* Firefox 19 */   display:-ms-flexbox;      display:flex;  /*flex容器*/   /*方向*/   -webkit-flex-direction: row;   -moz-flex-direction: row;   -ms-flex-direction: row;   -o-flex-direction: row;    flex-direction:row;    【新版本語法】 /*父元素-水平居中(主軸是橫向才生效)*/【新版本語法】   -webkit-justify-content: center;   -moz-justify-content: center;   -ms-justify-content: center;   -o-justify-content: center;   justify-content: center; /*子元素-垂直居中(在側軸、縱軸上)*/【新版本語法】  -webkit-align-items:center;  -moz-align-items:center;  -ms-align-items:center;  -o-align-items:center;  align-items:center; /*父元素-橫向換行 */   -webkit-flex-wrap: wrap;   -moz-flex-wrap: wrap;   -ms-flex-wrap: wrap;   -o-flex-wrap: wrap;   flex-wrap:wrap; /* 子元素—平分比例 */   -prefix-box-flex: 1; /* old spec webkit, moz */  -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */  -webkit-flex: 1;          /* Chrome */  -moz-box-flex: 1;         /* Firefox 19- */  -ms-flex: 1;              /* IE 10 */  width:20%;  flex: 1;                  /* NEW,  Opera 12.1, Firefox 20+ */  flex: 2;   不寫flex數值默認不能夠伸縮。 /* 子元素-用於改變源文檔順序顯示 */  -prefix-box-ordinal-group: 1; /* old spec; must be positive */  -webkit-box-ordinal-group: 2;      -moz-box-ordinal-group: 2;         -ms-flex-order: 2;                 -webkit-order: 2;                  order: 2;                          order: 3; 【老版本語法】 /*居中 */ box-pack:center;  //水平 box-align:center; //垂直 -webkit-box-pack:center; -webkit-box-align:center; -moz-box-pack:center; -moz-box-align:center; -ms-flex-pack:center; -ms-flex-align:center; /*子元素方向 */   -webkit-box-orient:horizontal;   -moz-box-orient:horizontal;   -ms-box-orient:horizontal;  -o-box-orient:horizontal;  box-orient:horizontal;

相關文章
相關標籤/搜索