灵活的盒子模型 - 显示器：flex，box，flexbox？

Question

我们今天很多人都知道，在CSS3中引入了新的灵活的盒子模型后，display属性inline和block的旧值已经过时了。但是，我们可能会在同一个灵活的盒子模型中在网络上找到不同的信息。

我们可能会发现display属性的3个不同值，即flex，box和flexbox。这三种灵活的盒子模型之间有什么区别？使用哪种模式？

Answer 1

您可以使用您需要支持的浏览器所需的任何一个。

display: box

• Firefox 2.0？ （前缀）
• Chrome 4.0？ （前缀）
• Safari / iOS 3.1？ （前缀）
• Android 2.1（前缀）

据我所知，通过box-lines: multiple进行换行并未在任何浏览器中实现。

display: flexbox

• Chrome 17- ?? （前缀）
• Internet Explorer 10（带前缀）

display: flex - 当前标准

• Chrome 21（带前缀），29（未加前缀）
• Opera 12.1（未加前缀），15（webkit前缀）
• Firefox 22（未加前缀）
• Safari / iOS 7（前缀）
• Blackberry 10（前缀）
• Internet Explorer 11（未加前缀）

http://caniuse.com/#feat=flexbox（请注意，IE10是唯一标记为支持包装的部分支持的浏览器）

flexbox和flex的规格相似，没有理由不同时包含两者，特别是因为IE10仅支持flexbox规范。 box的规范非常不同，可能不值得包括，具体取决于您所使用的效果，即使几乎所有属性都与flexbox / {{1}中的属性相似} specs。

您可能会发现有些浏览器支持多种规格。可能会有一段时间他们会放弃对旧规范的支持，因此请务必确保包含flex属性。

Answer 2

据我所知，上述三种不同版本的柔性箱型号可按年龄分类。

1. display: box - 这是第一个被认为是2009年最新款的灵活包装盒型号。不要使用它。

2. display: flexbox - 这款灵活的盒子模型于2011年推出，目前仍处于开发阶段。不要使用它。

3. display: flex - 这是最新的灵活盒子模型，目前已成为最新的盒子标准。这可能会进一步发生一些变化，但这比其他两个标准更受欢迎。