CSS3 Flexbox: display: box vs. flexbox vs. flex

Question

Yesterday I got a website in the school which uses the CSS 3 flexbox statement. I never used that before. So I googled it a bit and found a lot of different styles of t

Answer 1

display: flex; Is latest and better version currently we can use that in our code.

So go for that.

Answer 2

The specification has been through many iterations, see 2009, 2012, 2013 and each time the value was changed. display: flex; is the latest.

It is still a draft specification so any current implementation may still change.

Answer 3

These are different styles.
display: box; is a version of 2009.
display: flexbox; is a version of 2011.
display: flex; is the actual version.

Quote of Paul Irish

Warning: Flexbox has undergone some major revisions, so this article is out of date. In summary, the old standard (Flexbox 2009), which this article is based on, was implemented in Chrome since v4, Firefox since v2, and IE10 beta.

Since then, the new flexbox standard debuted and started to debut in Chrome 17. Stephan Hay has written a guide on the new flexbox implementation. Since then, the spec underwent naming changes which started landing in Chrome 21. Chrome 22 has a stable implementation of the latest spec.

At this point, implementing either has its risks, so be aware.

Here is the blog about the different flexbox statements.
This is a blog entry by css-tricks about the different versions.

When i use flexbox, i always write it like that:

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

Edit:
Still not everyone has a browser/device capable of viewing flexbox layouts. So for fallback solutions or alternatives there is this article by Kenan Yusuf on how to use flexbox without using flexbox.