flex布局兼容性问题小结_CSS教程_CSS_网页制作

来源:脚本之家  责任编辑:小易  

代码如下:DOCTYPEHTML>flex box 弹性布局html,body{height:100%;margin:0;}/*需要添加高度控制,否则无法撑满整个屏幕*/body{display:-webkit-box;webkit-box-orient:vertical;按照垂直方向上进行自适应处理*/}content{-webkit-box-flex:1;分配剩余的所有空间*/}.header{height:50px;min-width:500px;}/*顶部模块高度定死*/logo{width:100px;height:50px;background:#99f;}/*为区分模块,设置了背景色 logo部分固定宽高*/nav{height:50px;background:#ccc;}/*nav模块不固定宽度*/content{min-height:100px;}/*为防止之后的调整窗口大小是出现影响视觉效果的问题,特设置最小高度*/content,.header{display:-webkit-box;为content,header部分也添加box的展示模式*/}nav{-webkit-box-flex:1;}con2{-webkit-box-flex:1;}con1{width:200px;background:#f99;}/*固定宽度,高度不定*/con2{min-width:200px;background:#999;}/*同上的min-height*/con3{width:100px;background:#9f9;}/*固定宽度,高度不定*/footer{height:50px;min-width:500px;background:#ccc;}/*固定高度*/logo部分,宽高固定nav部分,高度固定,宽度自适应内容初始化第1模块内容初始化第2模块内容初始化第3模块底部,宽度不定,高度固定www.zgxue.com防采集请勿采集本网。

一.W3C各个版本的flex

设置flex-direction属性 flex-direction:column

2009 version

指定flex之后,子元素的float、clear和vertical-align属性将失效。

标志:display: box; or a property that is box-{*} (eg. box-pack)

是微信出了问题,这种不普遍支持的东西学学就好了,不要用到真实环境,目前还是老老实实用浮动靠谱。

2011 version

从颜色来看没有被识别为属性,你考虑加一下前缀,-webkit-这一系列的试试

标志:display: flexbox; or the flex() function or flex-pack property

是不是浏览器兼容问题 www.mb5u.com body { text-align:center; } p { margin:0 auto; width:300px; background:#06f; } img { } MB5U.com是一个专业的CSS学习站点,内容丰富并且保持天天更新,我们建立了很多QQ群供网友们互动讨论学习,MB5U.co

2012 version

标志:display: flex/inline-flex; and flex-{*} properties

2014 version

新增了对flex项z-index的规定

2015 W3C Editor’s Draft

没有大的改动

P.S.注意2015的是W3C Editor’s Draft,只是个草案,还处于修修改改的阶段,还没有征集浏览器供应商的意见

二.浏览器兼容性

关于flex的W3C规范: http://dev.w3.org/csswg/css-flexbox-1/

浏览器兼容性可以参考CanIUse: http://caniuse.com/#feat=flexbox

根据CanIUse的数据可以总结如下: IE10部分支持2012,需要-ms-前缀 Android4.1/4.2-4.3部分支持2009 ,需要-webkit-前缀 Safari7/7.1/8部分支持2012, 需要-webkit-前缀 IOS Safari7.0-7.1/8.1-8.3部分支持2012,需要-webkit-前缀

所以需要考虑新版本2012: http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/

而Android需要考虑旧版本2009: http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/

三.浏览器兼容的flex语法

上面分析得很清楚,针对需要兼容的目标使用对应版本的语法就好了,下面给出常用的布局代码:

/* 子元素-平均分栏 */.flex1 { -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-h { display: box; /* OLD - Android 4.4- */ 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+ */ /* 09版 */ -webkit-box-orient: horizontal; /* 12版 */ -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row;}/* 父元素-横向换行 */.flex-hw { /* 09版 */ /*-webkit-box-lines: multiple;*/ /* 12版 */ -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap;}/* 父元素-水平居中(主轴是横向才生效) */.flex-hc { /* 09版 */ -webkit-box-pack: center; /* 12版 */ -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; /* 其它取值如下: align-items 主轴原点方向对齐 flex-end 主轴延伸方向对齐 space-between 等间距排列,首尾不留白 space-around 等间距排列,首尾留白 */}/* 父元素-纵向排列(主轴) */.flex-v { display: box; /* OLD - Android 4.4- */ 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+ */ /* 09版 */ -webkit-box-orient: vertical; /* 12版 */ -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column;}/* 父元素-纵向换行 */.flex-vw { /* 09版 */ /*-webkit-box-lines: multiple;*/ /* 12版 */ -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap;}/* 父元素-竖直居中(主轴是横向才生效) */.flex-vc { /* 09版 */ -webkit-box-align: center; /* 12版 */ -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center;}/* 子元素-显示在从左向右(从上向下)第1个位置,用于改变源文档顺序显示 */.flex-1 { -webkit-box-ordinal-group: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-ordinal-group: 1; /* OLD - Firefox 19- */ -ms-flex-order: 1; /* TWEENER - IE 10 */ -webkit-order: 1; /* NEW - Chrome */ order: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */}/* 子元素-显示在从左向右(从上向下)第2个位置,用于改变源文档顺序显示 */.flex-2 { -webkit-box-ordinal-group: 2; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-ordinal-group: 2; /* OLD - Firefox 19- */ -ms-flex-order: 2; /* TWEENER - IE 10 */ -webkit-order: 2; /* NEW - Chrome */ order: 2; /* NEW, Spec - Opera 12.1, Firefox 20+ */}

为了更好的兼容性,我们需要给容器声明flex-h/flex-v,而不是一般的flex:

/* 父元素-flex容器 */.flex { display: box; /* OLD - Android 4.4- */ 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+ */}

、所以,建议在需要兼容Android时(2009版语法)采用flex-h/flex-v声明容器使用flex模式,在不需要兼容Android时(2012版语法)使用flex设置容器

注意:上面给的代码并不是完全兼容各个高端浏览器的,但要比任何其它现有代码兼容性好,具体兼容性测试结果请看Demo

四.flex布局Demo

在线测试:Demo

测试结果: Android4.2.2不支持换行 Android4.2.2下伪元素位置表现不一致 IOS Safari 7.1的表现与Chrome28、Chrome43、Firefox的表现一致 更多测试结果请反馈给我,谢谢

注意 :从测试结果可以发现flex布局会把伪元素当作元素来分配空间(文档好像有提到给伪元素设置position: fixed/absolute;可以避免这一情况,本文暂未验证),但我们一般希望伪元素只有装饰作用,不影响布局,这与我们的预期不一致。所以, 当flex布局中有伪元素时要特别小心,尽可能多地进行浏览器兼容性测试,或者改用float布局

flexbox布局在ie下的兼容性就爆炸了,ie10以上才支持,没有效果是不能实现,只要是在webkit内核浏览器里面内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 详解flex布局的元素如何分配容器的剩余空间
  • flex布局被子元素撑开如何保持内容不超出容器的方法
  • flex布局实现左侧文字溢出省略右侧文字自适应
  • 10分钟理解css3 flexbox弹性布局
  • 详解flex实现左右布局中按钮溢出隐藏效果
  • css3 flex 弹性布局实例代码详解
  • 移动端优先的flex三栏布局的使用方法
  • flexbox 布局的最简单表单的实现
  • css flex几种多列布局
  • 详解纯css实现瀑布流(multi-column多列及flex布局)
  • 使用CSS的flexbox布局,不能实现以下哪一个效果
  • 使用CSS的flexbox布局,不能实现以下哪一个效果
  • CSS弹性盒子布局flex
  • android webview 不支持css3 flex布局 怎么办
  • css3的Flex布局如何一行排一个元素
  • 指定flex之后.哪几个css属性会失效
  • css3弹性盒子兼容性问题
  • 用flex写css第二行不起作用
  • 为什么设置了display:flex后设置text-align:cent...
  • 在flex里 ,css样式怎么插入
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作csscss教程flex布局兼容性详解flex布局的元素如何分配容器的剩余空间css3 flex 弹性布局实例代码详解详解纯css实现瀑布流(multi-column多列及flex布局)css教程css3div+css教程web标准教程浏览器兼容教程css布局实例css控制ul li 的样式详解(推荐)html设置超链接字体颜色和点击后的字体颜色div水平垂直居中的完美解决方案css设置各种中文字体如雅黑、黑体、宋体、楷体等等css 文本字体颜色设置方法(css color)css 漂亮搜索框美化代码css自定义select下拉选择框的样式(不用其他标签模拟)css圆角效果 -webkit-border-radius(css3中border-radcss 中的background:transparent到底是什么意思有什么css 首行缩进两个文字css 实现渐变效果小结( linear-gradient线性渐变 和 r解决type=file 文件修改表单 名称不能正常回显的问题移动端前端适配方案(总结)css 横向进度条和竖向进度条实现代码css运用阿里巴巴矢量库快速在对应位置加上好看的图标详解盒模型大小取决于它的padding,margin,border数css+svg实现b站充电效果的示例代码css动画实现领积分效果的思路详解html/css中的空格处理及如何保留页面中的空格css实现气泡的小尖角效果
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved