css - 灵活的盒子模型 - 显示：flex、box、flexbox？

Question

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

我们可能会发现主要有 3 个不同的属性值，display即和。这三种柔性盒模型有什么区别，用哪一种？flexboxflexbox

Answer 1

您可以使用您需要支持的浏览器。

display: box

• 火狐2.0？（前缀）
• 铬 4.0？（前缀）
• Safari/iOS 3.1？（前缀）
• Android 2.1（前缀）

据我所知，box-lines: multiple在任何浏览器中都没有实现包装 via。

display: flexbox

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

display: flex - 当前标准

• Chrome 21（带前缀）、29（无前缀）
• Opera 12.1（无前缀）、15（webkit 前缀）
• Firefox 22（无前缀）
• Safari/iOS 7（前缀）
• 黑莓 10（前缀）
• Internet Explorer 11（无前缀）

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

flexbox和的规范flex足够相似，没有理由不包括两者，尤其是因为 IE10 仅支持flexbox规范。的规范box非常不同，根据您所追求的效果可能不值得包括在内，即使几乎所有属性都与flexbox/flex规范中的属性类似。

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

Answer 2

据我所知，以上三个不同版本的柔性盒模型可以按照年龄来分类。

1. display: box- 这是2009年左右被接受为最新型号的第一个柔性盒模型。不要使用它。

2. display: flexbox- 这种灵活的盒子模型于 2011 年问世，仍在开发中。不要使用它。

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