灵活的盒子模型-显示：flex，box，flexbox？[副本]

Question

今天，我们许多人都意识到显示类似属性内联和块在CSS3中引入新的柔性盒模型后，这些产品已经过时。但是，在同一个灵活的盒子模型中，我们可能会在网上找到不同的信息。

我们可能会发现显示财产，即弯曲，箱和柔性接线盒。这三种柔性盒子型号与使用哪一种有什么区别？

Answer 1

对于需要支持的浏览器，您可以使用任何一种。

显示：框

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

据我所知，通过包装箱线：多个未在任何浏览器中实现。

显示：flexbox

• 铬17-？？（前缀）
• Internet Explorer 10（前缀）

显示：柔性-现行标准

• Chrome 21（前缀）、29（非前缀）
• Opera 12.1（未固定），15（网络工具包前缀）
• Firefox 22（未固定）
• Safari/iOS 7（前缀）
• 黑莓10（前缀）
• Internet Explorer 11（未固定）

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

的规格柔性接线盒和弯曲很相似，没有理由不包括两者，特别是因为IE10只支持柔性接线盒规范。的规范箱虽然几乎所有属性都与柔性接线盒/弯曲规范。

您可能会发现有些浏览器支持多种规格。他们可能会放弃对旧规范的支持，因此始终确保包括弯曲属性。

Answer 2

据我所知，上述三种不同版本的灵活盒子模型可以按年龄分类。

1. 显示：框-这是第一款在2009年左右被接受为最新型号的柔性盒子。不要用它。

2. 显示：flexbox-这种灵活的盒子模型是在2011年推出的，目前仍在开发中。不要用它。

3. 显示：柔性-这是最新的灵活盒子模型，目前已成为最新的盒子标准。这可能会进一步进行一些更改，但这比其他两个标准更可取。