弹性布局虽然好用,但兼容性并不讨好,除了浏览器实现有差异外,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+ */
}