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浏览器兼容的知识点有哪些”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。