webkit box vs boxflex

Question

我最近遇到了一个教程,教师使用了这种语法:

display: -webkit-box;

http://www.youtube.com/watch?v=B-MNkBh7F2A @ 2:30(2012年8月创建)

我之前没有见过这个,并开始尝试找到它的一些信息.似乎CSS3有一个叫做flexbox的东西.但是我找不到上面语法的引用.

在上一篇教程(2011年9月)之前一年写的http://coding.smashingmagazine.com/2011/09/19/css3-flexible-box-layout-explained/中,他们使用以下语法:

display: box;

提到的框将被flexbox取代.

我还不确定flexbox或box的好处是什么.我没有看到有人使用它.有人可以给出一个基本的摘要吗？

另外,为什么教程使用-webkit-box？框 webkit 是否具体？他为什么不用

显示:盒子;

-webkit-box是否仅适用于Safari和Chrome？

如果它是跨浏览器兼容的,它可以使用哪些浏览器和版本？

box(非webkit)似乎是跨浏览器兼容的.

Answer 1

我认为这个主题总结了最好的:http://css-tricks.com/old-flexbox-and-new-flexbox/

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

以下是一些资源:http : //www.w3.org/TR/css3-flexbox/ http://dev.w3.org/csswg/css-flexbox/

我可以使用它吗？ http://caniuse.com/#search=flexbox