Flexbox浏览器兼容的知识点有哪些
这篇文章主要介绍了Flexbox浏览器兼容的知识点有哪些的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Flexbox浏览器兼容的知识点有哪些文章都会有所收获，下面我们一起来看看吧。
历史
09年到现在flexbox分别经历了三种方式：display:box; 、display:flexbox 还有现在的display:flex;
If you Google around about Flexbox, you will find lots of outdated information. Here’s how you can quickly tell:
If you are looking at a blog post (or whatever) about Flexbox and you see display: box; or a property that is box-{*}, you are looking at the old 2009 version of Flexbox.
If you are looking at a blog post (or whatever) about Flexbox and you see display: flexbox; or the flex() function, you are looking at an awkward tweener phase in 2011.
If you are looking at a blog post (or whatever) about Flexbox and you see display: flex; and flex-{*} properties, you are looking at the current (as of this writing) specification.
flexbox最初定义的时候其实2009年定义了第一个版本以后，就有浏览器厂商率先实现了display:box的功能。到了2011年大家对原来实现的功能还不满意，为了不改变原来对display:box的支持，就有了display:flexbox;。到后来规范逐渐成熟再加上功能需要在加完善，所以就到了display:flex，还会不会改鬼知道呢。
支持情况
我们从caniuse上看一下支持度。
display:box; 除了Firefox其他的都partial support with prefix -webkit-
display:flexbox 支持也很好啊。
display:flex 发现差不多和上一个一样的支持度。
大体总结了一下，除了Opera mobile12，还有IE，各大浏览器都是支持flexbox的旧版语法的。
注：最新的语法才加入了wrap的属性，所以旧版肯定是不支持的
解决方案
从上面的调研可以看出，其实最新的flex是兼容之前的语法的，只不过有一些新增的语法。那么解决这样的兼容问题显而易见的就是增加上旧版的语法，就可以解决一些支持旧版语法的浏览器啦。
flexbox分为container和item，所以兼容的写法也分两部分。
container
.grid{
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
}
item
.grid-cell{
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}
看到这里，你可能就有疑问，这样每次写这么多前缀不累吗？我们有工具啊：
我们可以使用类似autoprefixer, 或者是sass\less等工具来写css。另外安利一个sass的mixin大家可以看看compass-flex。
还有一种方式就是，完全用老版本的display:box来写，这样的话 除了一些新特性比如flex-wrap不能用以外（如果你觉得没必要用新特性）别的基本没什么问题，这里贴一份朋友写的grid系统 （据说兼容Android2.3）:
.row {
width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
height: auto;
display: block;
zoom: 1;
}
.row.flex:after {
display: none;
}
.row.flex > .col-flex,
.row.flex > .col,
.row.flex > .col-1,
.row.flex > .col-2,
.row.flex > .col-3,
.row.flex > .col-4,
.row.flex > .col-5,
.row.flex > .col-6,
.row.flex > .col-7,
.row.flex > .col-8,
.row.flex > .col-9,
.row.flex > .col-10,
.row.flex > .col-11,
.row.flex > .col-12 {
float: none;
}
.row.flex > .col-flex {
-webkit-box-flex: 1;
}
.row:after {
content: " ";
visibility: hidden;
display: table;
height: 0;
clear: both;
}
.row > .col,
.row > .col-1,
.row > .col-2,
.row > .col-3,
.row > .col-4,
.row > .col-5,
.row > .col-6,
.row > .col-7,
.row > .col-8,
.row > .col-9,
.row > .col-10,
.row > .col-11,
.row > .col-12 {
-webkit-box-flex: 0;
padding-left: 0;
padding-right: 0;
display: block;
float: left;
}
.row > .col-1 {
width: 8.33333%;
}
.row > .col-offset-1 {
margin-left: 8.33333%;
}
.row > .col-2 {
width: 16.66667%;
}
.row > .col-offset-2 {
margin-left: 16.66667%;
}
.row > .col-3 {
width: 25%;
}
.row > .col-offset-3 {
margin-left: 25%;
}
.row > .col-4 {
width: 33.33333%;
}
.row > .col-offset-4 {
margin-left: 33.33333%;
}
.row > .col-5 {
width: 41.66667%;
}
.row > .col-offset-5 {
margin-left: 41.66667%;
}
.row > .col-6 {
width: 50%;
}
.row > .col-offset-6 {
margin-left: 50%;
}
.row > .col-7 {
width: 58.33333%;
}
.row > .col-offset-7 {
margin-left: 58.33333%;
}
.row > .col-8 {
width: 66.66667%;
}
.row > .col-offset-8 {
margin-left: 66.66667%;
}
.row > .col-9 {
width: 75%;
}
.row > .col-offset-9 {
margin-left: 75%;
}
.row > .col-10 {
width: 83.33333%;
}
.row > .col-offset-10 {
margin-left: 83.33333%;
}
.row > .col-11 {
width: 91.66667%;
}
.row > .col-offset-11 {
margin-left: 91.66667%;
}
.row > .col-12 {
width: 100%;
}
.row > .col-offset-12 {
margin-left: 100%;
}
.flex {
display: -webkit-box;
display: box;
-webkit-box-orient: horizontal;
box-orient: horizontal;
}
.flex.vertical {
-webkit-box-orient: vertical;
box-orient: vertical;
}
.flex.start {
-webkit-box-pack: start;
}
.flex.center {
-webkit-box-pack: center;
}
.flex.end {
-webkit-box-pack: end;
}
.flex.justify {
-webkit-box-pack: justify;
}
.flex.top {
-webkit-box-align: start;
}
.flex.middle {
-webkit-box-align: center;
}
.flex.bottom {
-webkit-box-align: end;
}
其他的不兼容特性
在旧版的规范中，使用比例伸缩布局时，子元素的内容长短不同会导致无法"等分"，这个时候，我们需要给子元素设置一个"width:0%"来解决问题
不要给item设置"margin:auto"的属性，在部分安卓机下，它会导致该元素的宽度撑开到100%占位
旧版的box item要求属性是块级结构，所以很多inline元素需要设置display：block等才能显示正常
text-overflow: ellipsis;在display：flex元素上无效
记住上面的坑，避免跳进去。
关于"Flexbox浏览器兼容的知识点有哪些"这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对"Flexbox浏览器兼容的知识点有哪些"知识都有一定的了解，大家如果还想学习更多知识，欢迎关注行业资讯频道。
