116

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 the flexbox statements.

Some guys write display: box;, some use display: flexbox;, and other display: flex;.

So what are the differences? Which I should use?

11
  • 9
    Exact duplicate: stackoverflow.com/questions/15662578/…
    – cimmanon
    Apr 29, 2013 at 13:49
  • But which one will get an accepted answer first... I'd hedge your bets @cimmanon and post your answer to both!
    – andyb
    Apr 29, 2013 at 13:53
  • 3
    It doesn't matter which is closed. An older question can be closed if a newer one has better answers. I'd speculate that the older question, which was posted as a "question and answer" at the exact same time will either never be accepted or the OP will accept their own answer. Like I said, I'd duplicate your answer here and vote to close the older as a duplicate of this one, assuming the OP accepts an answer :-)
    – andyb
    Apr 29, 2013 at 13:59
  • 2
    @andyb: For me have both answers here better links and also a solution... So i think, my question shouldn't be closed, even if it's a duplicate.
    – user1722486
    Apr 29, 2013 at 14:05
  • 2
    @andyb: Ah! I missed that somehow. We'll see to it shortly. Thanks.
    – BoltClock
    Apr 30, 2013 at 7:32

3 Answers 3

190

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 sequence of declaration seems matters. I was working on old Android chrome which only supports -webkit-box, this declaration has to come last to be effective. Anyone experience this too?
    – ken
    Oct 3, 2014 at 1:44
  • 3
    @Ken No, -webkit-box comes first. Your last declaration should always be the most recent or the W3C Standard. However I'd recommend -ms-flexbox after -webkit-flex because IE12/Edge supports -webkit-flex, but you technically want IE to use its proper -ms- prefix instead of -webkit-. It's a general caution nitpick though as display: flex; is not affected by IE12 here.
    – hexalys
    Mar 31, 2015 at 2:34
13

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.

0
6

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

So go for that.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.