webkit box vs boxflex答案

【问题标题】：webkit box vs boxflexwebkit box vs boxflex
【发布时间】：2013-05-15 06:33:14
【问题描述】：

我最近遇到了一个教程，其中讲师使用了这种语法：

display: -webkit-box;

我以前从未见过这个并开始尝试查找有关它的一些信息。似乎 CSS3 有一个叫做 flexbox 的东西。但我找不到上述语法的引用。

在这篇文章http://coding.smashingmagazine.com/2011/09/19/css3-flexible-box-layout-explained/，写于上述教程的前一年（2011 年 9 月），他们使用以下语法：

display: box;

并且提到的盒子将被替换为弹性盒子。

我仍然不确定 flexbox 或 box 有什么好处。我没有看到人们使用它。谁能给个基本的总结？

另外，为什么教程使用-webkit-box？ box webkit 是特定的吗？他为什么不使用

显示：框；

-webkit-box 是否意味着它只适用于 Safari 和 Chrome？

如果它是跨浏览器兼容的，它适用于哪些浏览器和版本？

box（非 webkit）似乎是跨浏览器兼容的。

【问题讨论】：

【解决方案1】：

基本上，Flexbox 有 3 种不同的标记“迭代”。旧的 2009 标记、仍然旧的 2011 标记以及尚未正式发布或支持的“新”标记。重要的是要注意，尽管您链接的视频是在 2012 年上传的，但制作视频的人是使用真正古老的 2009 年 flexbox 实现。我建议不要遵循该教程。

【讨论】：

很好，谢谢。所以我不得不对使用 flexbox 说一个明确的“不”。仅部分支持 IE10、FF 19 - 21 和 Safari 5.1 - 6.0。 Chrome 有最好的支持。只是没有足够的浏览器使用它。你也是这样读的吗？
有些人不会认为这是绝对不，事实上现在有人在使用新模型，并且有一些方法可以提供优雅的降级，但我认为它的工作量超过了它的价值现在的时刻。也就是说，我确实相信有一些用于新的 flexbox 模型的 javascript“polyfills”，但我不知道任何。这样的例子是 flexie.js - 但这是针对规范的“旧”2011 迭代。综合考虑，这是一段非常棒的代码，而且非常强大，但现在我说请耐心等待，等待官方支持
Opera 和 Chrome 都在使用标准属性。

【解决方案2】：

-webkit-box 是最新的，在使用需要大量 javascript 的旧样式时节省了很多时间，因此在使用 webkit 进行设计时，您可以按照最新标准生产您的工作并节省大量工时.

【讨论】：