display flex 的兼容性写法

拖勇哥的福,知道了为什么我的手机上显示flex 有问题,原来是只写了新的flex 写法,在此记录下兼容性的写法:

 

.flex{
display: -webkit-box; /* OLD – iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD – Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER – IE 10 */
display: -webkit-flex; /* NEW – Chrome */
display: flex;
flex-flow: row;
.box1{
-webkit-box-flex: 3; /* OLD – iOS 6-, Safari 3.1-6 */
-moz-box-flex: 3; /* OLD – Firefox 19- */
width: 30%; /* For old syntax, otherwise collapses. */
-webkit-flex: 3; /* Chrome */
-ms-flex: 3; /* IE 10 */
flex: 3; /* NEW, Spec – Opera 12.1, Firefox 20+ */
text-align: center;
}
.box2{
-webkit-box-flex: 7; /* OLD – iOS 6-, Safari 3.1-6 */
-moz-box-flex: 7; /* OLD – Firefox 19- */
width: 70%; /* For old syntax, otherwise collapses. */
-webkit-flex: 7; /* Chrome */
-ms-flex: 7; /* IE 10 */
flex: 7; /* NEW, Spec – Opera 12.1, Firefox 20+ */
padding-left: 1rem;
}
}

托俏云的福,引入了sass ,元素层级关系看的很清楚。

发表评论