css3 flex
css3中新出的这个flex在移动端表现出了非常大的发展空间,平时几乎都用的这个。可是这两天也发现了问题,display: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; /* 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- */ width: 20%; /* For old syntax, otherwise collapses. */ -webkit-flex: 1; /* Chrome */ -ms-flex: 1; /* IE 10 */ flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
这样就大功告成啦,妈妈再也不用担心flex不兼容啦~~~~