码迷,mamicode.com
首页 > Web开发 > 详细

css3 flex

时间:2015-11-27 14:37:30      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:

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不兼容啦~~~~

 

css3 flex

标签:

原文地址:http://www.cnblogs.com/neuscx/p/5000280.html

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