Geek Answers Handbook

Webkit box vs boxflex

I recently came across a tutorial in which the instructor used this syntax:

display: -webkit-box;

http://www.youtube.com/watch?v=B-MNkBh7F2A @ 2:30 (created aug 2012)

I have not seen this before and started trying to find information about it. CSS3 seems to have something called flexbox. But I could not find links to the syntax above.

In this article http://coding.smashingmagazine.com/2011/09/19/css3-flexible-box-layout-explained/ , written a year before the aforementioned tutorial (sept 2011), they use this syntax:

 display: box;

and the specified block will be replaced by flexbox.

I'm still not sure if flexbox or box is good. I do not see people using it. Can someone give a general summary?

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

display: box;

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

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

box (non webkit) seems to be compatible with the browser.

+7
source share
2 answers

I think this topic summarizes it better: http://css-tricks.com/old-flexbox-and-new-flexbox/

Basically Flexbox has 3 different “iterations” of markup. The old markup of 2009, the still old markup of 2011 and the "new" markup, which is not officially released or not supported. It’s important to note that despite the video you linked to the download in 2012, the guy who made the video using the really old 2009 implementation of flexbox. I would suggest NOT following this 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

+5
source

the -webkit-box is the latest and saves so much time using the old style, which requires a lot of javascript, so when designing with webkit you perform your work according to the latest standards and save a lot on man-hours.

-one
source

More articles:


All Articles