Flex Box布局学习- 兼容

随着自己写过的页面的增多,也遇到了很多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?

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

  • 盒子的兼容性写法
.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+ */
}
  • 子元素的兼容性写法
.flex1 {  
    -webkit-box-flex: 1   /* OLD - iOS 6-, Safari 3.1-6 */  
    -moz-box-flex: 1;     /* OLD - Firefox 19- */              
    -webkit-flex: 1;      /* Chrome */  
    -ms-flex: 1           /* IE 10 */  
    flex: 1;              /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

这种兼容写法不一定起效的。尤其是在底版本安卓系统中。因为什么呢?因为所有都是向下兼容的,所以写法的顺序一定要写好了才起作用。就是把旧语法写在底下,个别不兼容的移动设置才会识别,哪些是旧的语法,你懂的。那些带box的一定要写在最下面即可。

所以上面的兼容写法应该是这样的才对:

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

.flex1 {            
    -webkit-flex: 1;        /* Chrome */  
    -ms-flex: 1             /* IE 10 */  
    flex: 1;                /* 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- */       
}

这样来试试吧,保证不会再出现返工修改的问题。 good luck!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小狼的世界

Mac下快捷键的收集整理

最近刚换用了Mac的笔记本,因为之前是Linux用户,感觉切换的过程非常平滑,但是难免有些小不适应,在使用过程中,遇到一些快捷键,收集了下来,与大家分享。

1305
来自专栏码生

ReactNative 面试题

今天有一个 ReactNative 的面试。 时间紧迫,临时写了几个问题,初级面试问题。 都是关键字

7473
来自专栏葡萄城控件技术团队

MultiRow发现之旅(四)- 使用MultiRow开发WinForm应用(附源码)

前文回顾 MultiRow发现之旅(一)- 高效模板设计器 MultiRow发现之旅(二)- 详解属性管理器 MultiRow发现之旅(三)- 模板管理器和Ta...

23810
来自专栏小白课代表

给你的Windows加一个 「文件快速预览」功能

在macOS中,有一个非常好用的功能叫做Quick Look,当你在Finder想要查看一个文件时,不需要打开,只需要选中以后按空格即可预览大部分常见文件,Wi...

974
来自专栏菩提树下的杨过

silverlight之deeplink学习笔记

所谓的deeplink技术是为了解决silverlight(或flash)之类的RIA Web应用无法被搜索引擎收录而出现的,属于SEO范畴。 就拿最常见的企业...

1985
来自专栏携程技术中心

干货 | 前端常用的通信技术

作者简介 陈为平,携程市场部前端工程师,目前主要负责“携程运动”项目的大前端相关工作。 前段时间在忙开发携程运动项目和相应的微信小程序,其中和后端通信犹为频繁。...

4276
来自专栏落影的专栏

iOS开发笔记(八)---- 键盘、静态库、动画、Crash定位

4019
来自专栏iOS122-移动混合开发研究院

PureLayout,使用纯代码写AutoLayout

? ? ? ? ? ? 为iOS和OS X的自动布局最终的API -- 令人印象深刻的简单,非常强大。 PureLayout延伸的UIView /NSView...

3047
来自专栏zhisheng

使用 CodeMirror 打造属于自己的在线代码编辑器

前提 写这个的目的是因为之前项目里用到过 CodeMirror,觉得作为一款在线代码编辑器还是不错,也看到过有些网站用到过在线代码编辑,当然我不知道他们是用什么...

8487
来自专栏施炯的IoT开发专栏

《101 Windows Phone 7 Apps》读书笔记-ALARM CLOCK

课程内容 Ø 隔离存储空间 Ø 设置 Ø 设置页面向导 Ø Toggle Switch控件 Ø 使用自定义字体     Alarm Clock模仿的...

2046

扫码关注云+社区

领取腾讯云代金券