这篇文章会详细讲解flexbox布局如何兼容，边肖觉得挺实用的，所以分享给大家参考，希望大家看完这篇文章能有所收获。
flex布局早在2009年就有了，现在是2015年6月8日。使用最新的flex语法，你会发现支持水平并不好，即使是在“高端”浏览器上，比如Chrome、Firefox、Safari、Android和IOS Safari。
网上现有的代码都是各种版本，在Chrome下运行一般都可以，火狐一般都可以，但是安卓和IOS Safari都很弱。造成这种情况的原因主要是历史原因。从2009年到2015年，W3C规范多次更新，浏览器的支持程度也不一样。
1.flex的W3C版本。
2009版
标记：display:框；或者是box-{*}(例如box-pack)属性
2011年版本
标记：display: flexbox或者flex()函数或flex-pack属性
2012版
标记：display : flex/inline-flex；和flex-{*}属性
2014版
增加了关于弹性项目z索引的规定。
2015年W3C编辑草案
没有重大变化。
注：注意，2015年W3C编辑稿只是一个草稿，目前还处于修订修改阶段，尚未收集浏览器供应商的意见。
二.浏览器兼容性
W3C flex规范：http://dev.w3.org/csswg/css-flexbox-1/.
有关浏览器兼容性，请参见cani use:http://caniuse.com/#feat=flexbox。
根据CanIUse的数据，可以总结如下：
IE10部分支持2012，需要-ms-前缀。
Android4.1/4.2-4.3部分支持2009，需要-webkit- prefix。
Safari7/7.1/8部分支持2012，需要-webkit-前缀。
Safari 7.0-7.1/8.1-8.3部分支持2012，需要-webkit- prefix。
所以我们需要考虑2012年的新版本：http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/.
安卓需要考虑旧版本2009:http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/.
三.浏览器兼容的flex语法
从上面的分析可以清楚地看出，对于需要兼容的目标，使用相应版本的语法是很好的。常见的布局代码如下：
/子元素-平均列/
. flex1 {
-web kit-box-flex : 1；/OLD - iOS 6-，Safari 3.1-6 /
-moz-box-flex : 1；/OLD - Firefox 19- /
宽度：20%；/对于旧语法，否则折叠。/
-web kit-flex : 1；/Chrome /
-ms-flex : 1；/IE 10 /
flex : 1；/新，Spec - Opera 12.1，Firefox 20 /
}
/父元素-水平排列(主轴)/。flex-h {
display:框；/OLD -安卓4.4- /
display :-web kit-box；/OLD - iOS 6-，Safari 3.1-6 /
显示：-moz-box；/OLD - Firefox 19-(有问题，但大部分工作正常)/
display :-ms-flex box；/TWEENER - IE 10 /
display :-web kit-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设置容器
注意：上面给的代码并不是完全兼容各个高端浏览器的，但要比任何其它现有代码兼容性好。
关于“flexbox布局的兼容性怎么样”这篇文章就分享到这里了，希望
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/35985.html