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

问题:

I became yesterday a website in the school which use the css3 flexbox statement. I never used that before. So i google it a bit. And found a lot of different styles of the flexbox statements.
Some guys write display: box;, some use display: flexbox; and other display: flex;.

So what are the differents? Which i should use?

回答1:

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.

回答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.

回答3:

Flexible boxes, or flexbox, is a new layout mode in CSS3

Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices

For many applications, the flexible box model provides an improvement over the block model in that it does not use floats, nor do the flex container's margins collapse with the margins of its contents

  
   
flex item 1
   
flex item 2
   
flex item 3
  
    

Output :

回答4:

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

So go for that.

文章来源: CSS3 Flexbox: display: box vs. flexbox vs. flex