Html webkit box 与 boxflex
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16653958/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
webkit box vs boxflex
提问by 4thSpace
I recently ran across a tutorial where the instructor used this syntax:
我最近遇到了一个教程，其中讲师使用了以下语法：
display: -webkit-box;
http://www.youtube.com/watch?v=B-MNkBh7F2A@ 2:30 (created aug 2012)
http://www.youtube.com/watch?v=B-MNkBh7F2A@ 2:30（创建于 2012 年 8 月）
I hadn't seen this before and began trying to find some info on it. It seems CSS3 has something called flexbox. But I couldn't find references the above syntax.
我以前没有见过这个，并开始试图找到一些关于它的信息。似乎 CSS3 有一种叫做 flexbox 的东西。但我找不到上述语法的引用。
In this article http://coding.smashingmagazine.com/2011/09/19/css3-flexible-box-layout-explained/, written a year before the above tutorial (sept 2011), they use this syntax:
在这篇文章http://coding.smashingmagazine.com/2011/09/19/css3-flexible-box-layout-explained/ 中，写于上述教程前一年（2011 年 9 月），他们使用以下语法：
display: box;
and mentioned box will be replaced with flexbox.
并且提到的盒子将被 flexbox 替换。
I'm still not sure what the benefit of flexbox or box is. I don't see people using it. Can someone give a basic summary of it?
我仍然不确定 flexbox 或 box 的好处是什么。我没有看到人们使用它。有人可以给它一个基本的总结吗？
Also, why does the tutorial use -webkit-box? Is boxwebkit specific? Why didn't he use
另外，为什么教程使用-webkit-box？是箱WebKit的具体点吗？他为什么不用
display: box;
显示：盒子；
Does -webkit-box mean it only works in Safari and Chrome?
-webkit-box 是否意味着它只适用于 Safari 和 Chrome？
If it is cross browser compatible, which browsers and versions does it work with?
如果它是跨浏览器兼容的，它适用于哪些浏览器和版本？
box(non webkit) seems to be cross browser compatible.
box（非 webkit）似乎是跨浏览器兼容的。
采纳答案by Michael
I think this topic summarizes it the best: http://css-tricks.com/old-flexbox-and-new-flexbox/
我认为这个话题总结得最好：http: //css-tricks.com/old-flexbox-and-new-flexbox/
Basically Flexbox has 3 different "iterations" of the markup. The old 2009 markup, the still old 2011 markup, and the "new" markup which isn't officially released or supported yet.It's important to note that despite the video you linked to being uploaded in 2012, the guy who made the video is using the really old 2009 implementation of flexbox. I would suggest NOT following that tutorial.
基本上 Flexbox 有 3 种不同的标记“迭代”。旧的 2009 年标记、仍然旧的 2011 年标记以及尚未正式发布或支持的“新”标记。重要的是要注意，尽管您链接的视频是 2012 年上传的，但制作视频的人是使用真正古老的 2009 年 flexbox 实现。我建议不要遵循该教程。
Here are some more resources: http://www.w3.org/TR/css3-flexbox/http://dev.w3.org/csswg/css-flexbox/
这里有更多资源：http: //www.w3.org/TR/css3-flexbox/ http://dev.w3.org/csswg/css-flexbox/
And Can I Use it? http://caniuse.com/#search=flexbox
我可以使用它吗？ http://caniuse.com/#search=flexbox
回答by user7112237
the -webkit-box is the latest and saves so much time on using the old style which requires a lot of javascript ,so in designing with the webkit you are producing your work to the latest standards and a big saving on man hours.
-webkit-box 是最新的并且在使用需要大量 javascript 的旧样式时节省了大量时间，因此在使用 webkit 进行设计时，您可以按照最新标准制作您的作品，并大大节省了工时。
