box-flex布局在这几年发生了多次变化,可分为2009版、2011版以及2013版,

区分:

display:box(inline-box), box-{*}的格式为2009版

display:boxflex(inline-flexbox), flex()为2011版

display:flex(inline-flex), flex()为2013版,也是最新的版本

由此可见兼容写法的复杂。。

三种版本分别由那些浏览器支持呢?

2009: 支持性最广的一版: Chrome、Firefox2+、Safari3.1+(一部分属于部分支持,得加上-webkit、-moz前缀),但IE与opera完全不支持

2011:由IE10部分支持

2013:Chrome21+、Opera(Opera Mobile12.1+和Blackberry10+)

可查看以下兼容图:

2009版本写法

.box {

  display: -webkit-box; /*兼容webkit内核浏览器,例如chrome与safari*/

  display: -moz-box;/*兼容firefox*/

  display: box;

}

.box>div {

  -webkit-box-flex: 1;

  -moz-box-flex: 1;

}

注意:

1.flex元素若添加float、position属性,将失去box-flex布局赋予其的宽高等属性

2013写法:

.box {

  display: -webkit-flex; /*webkit内核*/

  display: flex; /*兼容firefox、opera*/

}

.box >div {

  -webkit-flex: 1 0 auto;

  flex: 1 0 auto;

}

注意:

1.此写法中子元素设置float无效,不影响原布局

为了追求更好地兼容性,我们一般会采用兼容写法

.box {

  display: -webkit-box;

  display: -moz-box;

  display: -ms-boxflex;

  display: -webkit-flex;

  display: flex;

}

.div >div {

  -webkit-box-flex: 1;

  -moz-box-flex: 1;

  -ms-flex: 1;

  width: 50%;

  -webkit-flex: 1;

  flex: 1;

}

注意:

新语法中没有必要显式设置宽度(width:50%),但旧语法在部分老旧浏览器上会崩溃,因此最好加上。

兼容写法支持情况:

  • Chrome any
  • Firefox any
  • Safari any
  • Opera 12.1+
  • IE 10+
  • iOS any
  • Android any

box-flex兼容写法的更多相关文章

  1. flex(兼容写法)

    CSS样式 flex:定义布局为盒模型 flex-v:盒模型垂直布局 flex-1:子元素占据剩余的空间 flex-align-center:子元素垂直居中 flex-pack-center:子元素水 ...

  2. display:box的兼容写法

    .box{ /* display */ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -o-box; ...

  3. flex兼容问题

    display:flex作为C3的新属性,还是有的浏览器不支持的,那下面我们就来说一下他的兼容写法 .box{ display: -webkit-box; /* 老版本语法: Safari, iOS, ...

  4. currentStyle和getComputedStyle的兼容写法

    今天学习javascript的时候,教程中介绍了一种简单实现jQuery 中css()方法的写法 <!DOCTYPE html> <html lang="en"& ...

  5. IE浏览器兼容问题(上)——html和css的兼容写法

    用户使用的浏览器五花八门,我们要保证每一种浏览器都能兼容我们的代码,不能要求用户去改变浏览器,那么就得在我们的代码上下功夫.此时我们要用到hack. HACK就是针对不同的浏览器写不同的HTML.CS ...

  6. list之flex布局写法

    list之flex布局写法 移动端实际场景中经常会遇到将header置顶,然后下面list需要滚动的情况,通常的做法会是将header使用fixed的方式固定到顶部,然后list主体相对于header ...

  7. JavaScript中的数组遍历forEach()与map()方法以及兼容写法

    原理: 高级浏览器支持forEach方法 语法:forEach和map都支持2个参数:一个是回调函数(item,index,list)和上下文: forEach:用来遍历数组中的每一项:这个方法执行是 ...

  8. CSS3-border-radius的兼容写法大全

    <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...

  9. javascript阻止事件冒泡的兼容写法及其相关示例

    //阻止事件冒泡的兼容写法 function stopBubble(e){ //如果提供了事件对象,则是一个非IE浏览器 if(e && e.stopPropagation) //因此 ...

随机推荐

  1. windows中控制台窗口和普通窗口有什么区别?

    1. 窗口都是windows标准窗口,有窗口句柄,但是console window没有消息循环,直接从缓冲区读数据,显示数据. windows中普通窗口都有自己的窗口过程, 我可以使用SetWindo ...

  2. jquery call 函数改变this作用域

    call的用法在许多地方都看到过介绍.可以用来改变函数的作用域. 在页面中我们在一个input中添加click事件 <input id="Button1" type=&quo ...

  3. ssh远程登录+查看系统版本+使用scp命令上传下载

    ssh远程登录命令简单实例   ssh命令用于远程登录上Linux主机.   常用格式:ssh [-l login_name] [-p port] [user@]hostname 更详细的可以用ssh ...

  4. Caffe机器学习框架

    Caffe是一个常用的卷积神经网络框架,在视频.图像处理方面应用较多. 官网:http://caffe.berkeleyvision.org/ 演示:http://demo.caffe.berkele ...

  5. iOS开发常见问题(不断更新)

    1.如何从程序退出到桌面 在单击事件中 exit(0);即可. 2.如何强制横屏 在你需要横屏的控制器里加入如下代码 - (BOOL)shouldAutorotate{ return NO; } - ...

  6. Splitting Pile

    Splitting Pile Time limit : 2sec / Memory limit : 256MB Score : 300 points Problem Statement Snuke a ...

  7. php var_dump()函数的详解

    说明:var_dump()方法,判断一个变量的类型与长度,并输出变量的数值,如果变量有值,则输出是变量的值,并返回数据类型.显示关于一个或多个表达式的结构信息,包括表达式的类型与值.数组将递归展开值, ...

  8. stochastic matrix

    w Stochastic matrix - Wikipedia  https://en.wikipedia.org/wiki/Stochastic_matrix Suppose you have a ...

  9. <2013 12 17> 雅思写作、口语相关

    这一个多月,参加了两次雅思考试,成绩分别为: Overall:6.5     L:7.0     R:7.5     W:6.0     S:5.5 Overall:7.0     L:7.0     ...

  10. 【python】-- Django路由系统(网址关系映射)、视图、模板

    Django路由系统(网址关系映射).视图.模板 一.路由系统(网址关系映射) 1.单一路由对应: 一个url对应一个视图函数(类) urls.py: url(r'^test', views.test ...