在线建站培训
您的位置: 魔客吧 网页制作 CSS教程 查看内容

深入理解CSS系列之flex兼容

2017-7-13 08:00 | 发布者: moke | 栏目:CSS教程

我写页面的时候用到过很多的flex布局,觉得非常好用。下面附上一篇不错的flex布局介绍的文章。 

Flex 布局教程想了解的可以自己去看看这篇博文,或者自己百度,这里先部多做介绍,我们主要来说一说flex布局的兼容性问题。

why?

大家可能想问了,flex布局为什么会存在兼容性问题啊?

之所以存在兼容性问题,是因为技术在不断的更新,有些旧的浏览器只支持旧语法的书写方式,所以就出现所谓的兼容性问题。

what?

那么新旧版本是什么?

flex布局分为旧版本dispaly: box;,过渡版本dispaly: flex box;,以及现在的标准版本display: flex;。所以如果你只是写新版本的语法形式,是肯定存在兼容性问题的。

Android 

     2.3 开始就支持旧版本 display:-webkit-box;

     4.4 开始支持标准版本 display: flex;

IOS 

     6.1 开始支持旧版本 display:-webkit-box;

     7.1 开始支持标准版本display: flex;

PC 

ie10开始支持,但是IE10的是-ms形式的。

下面是各个浏览器的支持情况

how?

所以我们该如何进行兼容性的写法呢?

盒子的兼容性写法

?
1
2
3
4
5
6
7
.box{
    display: -webkit-box;  /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box;     /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox;  /* 混合版本语法: IE 10 */
    display: -webkit-flex; /* 新版本语法: Chrome 21+ */
    display: flex;         /* 新版本语法: Opera 12.1, Firefox 22+ */
}

子元素的兼容性写法

?
1
2
3
4
5
6
7
.flex1
    -webkit-box-flex: 1   /* OLD - iOS 6-, Safari 3.1-6 */ 
魔客吧温馨提示:如果正在寻找登门户网站模板,那么到魔客吧的 门户网站模板 频道看看吧,这里有很多的门户网站模板哦!

最新分享资源

最新评论

验证码 换一个