-
flex布局分為舊版本dispaly: box;盼樟，過渡版本dispaly: flex box;，以及現(xiàn)在的標(biāo)準(zhǔn)版本display: flex;稍途。所以不同版本瀏覽器肯定存在兼容問題甲馋。
Android
2.3 開始就支持舊版本 display:-webkit-box;
4.4 開始支持標(biāo)準(zhǔn)版本 display: flex;
IOS
6.1 開始支持舊版本 display:-webkit-box;
7.1 開始支持標(biāo)準(zhǔn)版本display: flex;
PC
ie10開始支持，但是IE10的是-ms形式的。 盒子的兼容性寫法
在低版本安卓系統(tǒng)中。因?yàn)樗卸际窍蛳录嫒莸亩喜浚枰雅f語法寫在底下個(gè)別不兼容的移動設(shè)置才會識別趁耗，那些帶box的一定要寫在最下面著拭。
.box{
display: -webkit-flex; /* 新版本語法: Chrome 21+ */
display: flex; /* 新版本語法: Opera 12.1, Firefox 22+ */
display: -webkit-box; /* 老版本語法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本語法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本語法: IE 10 */
}
.flex1 {
-webkit-flex: 1; /* Chrome */
-ms-flex: 1 /* IE 10 */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-flex: 1 /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
}
盒模型（支持所有控件）
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
