码迷,mamicode.com
首页 > 其他好文 > 详细

flex兼容性写法

时间:2016-04-11 22:20:39      阅读:419      评论:0      收藏:0      [点我收藏+]

标签:

父元素:{
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+ */
}
 
注意:如果子元素是a或者span之类的行内元素,记得给子元素添加display:block属性;另外请格外注意,grunt无法编译display: box属性,请使用“~”让grunt跳过此属性。

flex兼容性写法

标签:

原文地址:http://www.cnblogs.com/mqfblog/p/5380350.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!