webkit box vs boxflex

Question

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.

Answer 1

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