flex布局兼容性问题小结

首先我们来讲解一下什么是flex布局。Flex布局，也叫Flexbox，是CSS3规范中引入的一种布局模式。该布局模式主要用于当父元素中各子元素的尺寸不定时，快速、轻松地为其指定正确的布局方式，进而实现灵活性更强的页面布局。

而针对flex布局的兼容性问题，一般涉及到的是早期版本的浏览器无法完全支持Flexbox模型的情况。为此，本攻略将就该问题提供下方针对不同浏览器兼容性的解决方案示例。

一、在IE10及更早版本下的问题

IE10及更早版本的浏览器并不支持Flexbox规范中的新域和新属性值。对于这种情况，我们可以通过以下的方式解决：

.container{
    display:-webkit-box;/*For safari3.1-6.0 */
    display:-moz-box;/*For Firefox 2-28 */
    display:-ms-flexbox;/*For IE10  */
    display:-webkit-flex;/*For Safari 6.1 */
    display:flex;/*For modern browsers */
}

具体而言，就是将flex的display属性值加上浏览器前缀，使得在不同浏览器中都可以正常使用Flexbox模型。

二、在IE11及更早版本下的问题

IE11及更早版本的浏览器对Flexbox的支持存在一些兼容性问题，比如在浏览器中输出Flexbox布局的时候，会出现元素重叠等情况。为此，我们可以通过以下的方式解决：

.container{
    display:-ms-flexbox;/*For IE11 */
    display:flex;/*For modern browsers */
    -ms-flex-wrap:wrap;/*IE11额外添加的属性*/
    flex-wrap:wrap;/*IE11额外添加的属性 */
}

上述方式中，我们主要采取了加上-ms前缀的方式解决此类问题。同时，还需注意IE11额外添加的flex-wrap属性的适配，避免其影响整个容器的布局。

三、在FireFox早期版本下的问题

虽然FireFox最早也支持Flexbox布局，但其实现代码和今天常见流行模式不同。如果你需要适配FireFox早起版本，可以采用以下方式实现：

.container{
    display:-webkit-flex;/*safari3.1-6.0 */
    display:flex;/*modern browsers */
    -moz-box-orient:vertical;/*FireFox 2-18 */
    -moz-box-direction:normal;/*FireFox 2-18 */
    -webkit-box-orient:vertical;/*safari3.1-6.0 */
    -webkit-box-direction:normal;/*safari3.1-6.0 */
    -ms-flex-direction: column;/* IE10 */
    flex-direction:column;/* modern browsers */
}

以上例子中，我们通过添加前缀，同时在FireFox早期版本中对-moz-box-orient和-moz-box-direction属性进行适配，从而实现在FireFox早期版本下支持Flexbox布局。

四、在Safari3.1-6.0版本下的问题

如果需要在Safari3.1-6.0版本下兼容Flexbox的话，可以采用以下方式：

.container{
    display:-webkit-box;/*for Safari3.1-6.0 */
    display:-moz-box;/*For Firefox 2-28 */
    display:-webkit-flex;/*For Safari 6.1 */
    display:flex;/*For modern browsers */
    -webkit-box-orient:vertical;/*safari3.1-6.0 */
    -webkit-box-direction:normal;/*safari3.1-6.0 */
    -ms-flex-direction:column;/*IE10 */
    flex-direction:column;/*modern browsers */
}

以上方式中，我们主要是通过为display属性加上适当的前缀，以及添加相应的属性值，从而实现在Safari3.1-6.0版本下兼容Flexbox规范。

以上就是Flex布局兼容性问题小结的完整攻略，其中包括了对于不同浏览器版本下的Flexbox增加相应的前缀，从而实现兼容性适配。以上示例比较简单，但是依据这些方法，可以适应不同兼容性问题，从而保证在任何浏览器下都能保持相应的Flexbox布局效果。