盒子模型flex的移动端兼容性问题

标签： 前端、移动端

---

关于flex布局，W3C算是出了好多套的规范，但是对各个浏览器的兼容性问题，那就真的不敢恭维。

• W3C 2009年第1次草案：display:box
• W3C 2011年第2次草案：display:flexbox | inline-flexbox
• W3C 2012年第5次草案及以后的候选推荐标准：display:flex | inline-flex

以前一直以为新标准的display: flex 能够完全替代display: -webkit-box，然而并不能。

** 开发中发现，iOS8下的微信内置浏览器与Safari不支持display:flex的写法。**

解决方案

//好长一段，包括三个版本的写法flex、flexbox、box
.flex-container {
  display: -moz-box;  /* Firefox */ 
  display: -ms-flexbox;    /* IE10 */ 
  display: -webkit-box;    /* Safari */  
  display: -webkit-flex;    /* Chrome, WebKit */ 
  display: box;  
  display: flexbox;  
  display: flex;   
  align-items: center;
}

另外，weui的0.4测试版本并没有做flex的兼容性优化，一直到1.0版本才加入兼容熟悉，所以慎用。

作者 @郑小明
2016 年 10 月 20 日