webkit box vs boxflex

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是最新的，它可以节省很多时间来使用需要大量JavaScript的旧式样式，所以在使用webkit进行设计时，您将按照最新标准进行工作，并节省大量工时。

链接地址: http://www.djcxy.com/p/71486.html

上一篇: 如何检测鼠标在特定元素上的方向

下一篇: webkit框vs boxflex