弹性布局box、flexbox、flex区别

首先，分析一下名字的由来：

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

没区别，仅是各阶段草案命名
flex是最新的
但是在实际的浏览器测试中，display: flex 不能完全替代display: -webkit-box

display: box 使用可以参考http://www.html5rocks.com/en/tutorials/flexbox/quick/
display: flex 使用可以参考https://css-tricks.com/snippets/css/a-guide-to-flexbox/
兼容性的问题可以参考https://css-tricks.com/old-flexbox-and-new-flexbox/
Android UC浏览器只支持display: box语法。而iOS UC浏览器则支持两种方式
需要注意的是如果要使用line-clamp时需要用display:box;

 

---

flex弹性盒模型有3个版本: 旧版本（box）、混合版本（flexbox）、新版本（flex）：

CSS旧版flex及兼容

深入理解CSS弹性盒模型flex