Webkit Box与BoxFlex [英] webkit box vs boxflex

问题描述

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

 显示:-webkit-box; 

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

我以前没有看过这个东西，所以开始尝试寻找有关它的信息.看来CSS3有一个叫做flexbox的东西.但是我找不到上述语法的引用.

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

  display:框； 

和提到的盒子将被flexbox取代.

我仍然不确定flexbox或box的好处是什么.我看不到有人在使用它.有人可以给它一个基本的总结吗?

此外，为什么本教程使用-webkit-box? box Webkit是否特定?他为什么不使用

显示:框；

-webkit-box是否仅在Safari和Chrome中有效?

如果它与跨浏览器兼容，那么它可用于哪些浏览器和版本?

box (非Webkit)似乎与跨浏览器兼容.

解决方案

我认为本主题对其进行了总结:

还有更多资源: http://www.w3.org/TR/css3-flexbox/ http://dev.w3.org/csswg/css-flexbox/

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

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)

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.

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:

display: box;

and mentioned box will be replaced with 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?

Also, why does the tutorial use -webkit-box? Is box webkit specific? Why didn't he use

display: box;

Does -webkit-box mean it only works in Safari and Chrome?

If it is cross browser compatible, which browsers and versions does it work with?

box (non webkit) seems to be cross browser compatible.

解决方案

I think this topic summarizes it the best: 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.

Here are some more resources: http://www.w3.org/TR/css3-flexbox/ http://dev.w3.org/csswg/css-flexbox/

And Can I Use it? http://caniuse.com/#search=flexbox

这篇关于Webkit Box与BoxFlex的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！