灵活的盒子模型 - 显示器:flex,box,flexbox？

Question

我们很多人今天都知道,上了年纪值display像财产inline和block新的灵活盒模型已经在CSS3中被引入后,已经过时.但是,我们可能会在同一个灵活的盒子模型中在网络上找到不同的信息.

我们可能会发现主要存在3种不同的值display,即财产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(前缀)
• 黑莓10(前缀)
• Internet Explorer 11(未加前缀)

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

规格flexbox和flex足够相似,没有理由不包括两者,特别是因为IE10只支持flexbox规范.规格box是非常不同的,可能不值得包括取决于您所追求的效果,即使几乎所有属性都与flexbox/ flexspecs中找到的类似.

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

Answer 2

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

1. display: box - 这是第一款被认为是2009年最新车型的柔性箱型号.请勿使用.

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

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