114

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?

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
  • 9
    Exact duplicate: http://stackoverflow.com/questions/15662578/flexible-box-model-display-flex-box-flexbox – cimmanon Apr 29 '13 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 '13 at 13:53
  • This one *should* be closed as a duplicate, but because the original doesn't have an upvoted answer, SO won't allow it. Also worth noting, the [flexbox tag wiki](http://stackoverflow.com/tags/flexbox/info) was updated a few days ago to have relevant information in it. – cimmanon Apr 29 '13 at 13:55
  • Oh snap sorry. I found nothing in google... Should i delete this question? Both answers (By dTDesign and the answer on the other question)... –  Apr 29 '13 at 13:59
  • 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 '13 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. –  Apr 29 '13 at 14:05
  • I agree. Voting to close the other question since it has no accepted answer. Upvoting @cimmanon on the other question anyway, since it is a good answer, although it would be nice if it was copied here so they are all in the same place :-) – andyb Apr 29 '13 at 14:29
  • If the questions are exactly identical, it is better to flag for a moderator to merge both questions into one. (cc @andyb) – BoltClock Apr 30 '13 at 06:26
  • @BoltClock Thanks. The problem yesterday was that the older question had no accepted answer. So even though it was an exact duplicate, this question could not be closed as duplicate. Since this question _now_ has an accepted answer, I flagged http://stackoverflow.com/questions/15662578/flexible-box-model-display-flex-box-flexbox yesterday to be merged into this question. – andyb Apr 30 '13 at 07:28
  • 2
    @andyb: Ah! I missed that somehow. We'll see to it shortly. Thanks. – BoltClock Apr 30 '13 at 07:32
  • Does this answer your question? [Flexible box model - display : flex, box, flexbox?](https://stackoverflow.com/questions/15662578/flexible-box-model-display-flex-box-flexbox) – BuZZ-dEE Apr 04 '20 at 21:33

3 Answers3

188

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.

Michael Schmidt
  • 9,090
  • 13
  • 56
  • 80
  • 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 03 '14 at 01: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 '15 at 02:34
12

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.

GolezTrol
  • 114,394
  • 18
  • 182
  • 210
andyb
  • 43,435
  • 12
  • 121
  • 150
5

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

So go for that.

johnie
  • 113
  • 1
  • 9