弹性布局的兼容性

弹性布局虽然好用，但兼容性并不讨好，除了浏览器实现有差异外,PC与移动端也有差异。

display: flex 与 display: box都用于弹性布局。display: box是2009年的命名，display: flex是2012之后的命名。但display: flex不能完全的向后兼容，有些浏览器不支持。

display: flex

PC端：Chrome和Firefox支持度都很好，IE不支持。
移动端：

• iOS Safari支持，UC支持，微信浏览器不支持
• Android 原生浏览器 UC 微信都不支持

display：box

PC端：Chrome和Firefox支持度都很好，IE不支持。
移动端：

• iOS Safari支持，UC支持，微信浏览器不支持
• • Android 原生浏览器 UC 支持

总结起来：IE都不支持，因此这个技术用于移动端是比较理想的，因为移动端的浏览器内核基本为webkit。

.container{  
    display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */  
    display: -moz-box; /* Firefox 17- */  
    display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */  
    display: -moz-flex; /* Firefox 18+ */  
    display: -ms-flexbox; /* IE 10 */  
    display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */  
}