.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;