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. 表单中method="post"什么意思?

    表示表单中的数据以"post"方法传递.Form提供了两种数据传输的方式——get和post.虽然它们都是数据的提交方式,但是在实际传输时确有很大的不同,并且可能会对数据产生严重的 ...

  2. python 使用正则表达式的爬虫

    下面我们一起尝试一下爬取内涵段子网站: http://www.neihan8.com/article/list_5_1.html 打开之后,不难看到里面一个一个灰常有内涵的段子,当你进行翻页的时候,注 ...

  3. Mysql事务-隔离级别

    MYSQL事务-隔离级别 事务是什么? 事务简言之就是一组SQL执行要么全部成功,要么全部失败.MYSQL的事务在存储引擎层实现. 事务都有ACID特性: 原子性(Atomicity):一个事务必须被 ...

  4. Android Studio使用心得 - 常见问题集锦

    FBI Warning:欢迎转载,但请标明出处:http://blog.csdn.net/codezjx/article/details/38669939,未经本人允许请勿用于商业用途,感谢支持! 整 ...

  5. inner join和out join的区别

    inner join(又叫join) out join包括left join,right join和full join(也就是left+right)

  6. Grafana-----Singlestat Panel

    singlestat面板允许你显示a SINGLE series的主要的汇总统计的一系列.它将series 简化为单个数(通过查看序列中的最大值.最小值.平均值或总和).singlestat还提供阈值 ...

  7. String研究

    =======================String=================================== String里的==和equalsJava String “equal ...

  8. pmd 使用笔记

    pmd是一块开源的代码静态分析工具,使用java编写,可以自定义规则来进行自己想要的分析.pmd可以单独使用,也可以作为idea.eclipse的插件使用.它的规则分为xpath规则,和java规则. ...

  9. 目标是:互联网方向的Java开发工程师

    我们需要这样完美的你: --师出名门:应届统招本科及以上学历,计算机相关专业: --技艺超群:熟悉JAVA面向对象编程, J2EE体系结构,熟悉Struts2.Spring.Ibtais.Memcac ...

  10. Linux中接收键盘输入

    read 选项 变量名 -p    "提示信息" -t     指定等待时间,不指定则一直等待 -n    指定接收的字符数,不指定则不限制 -s    隐藏输入的数据,适用于机密 ...