27

Many of us are aware today that the older values of the display property like inline and block are outdated after the new flexible box model has been introduced in CSS3. But, we might find different information on the web in the same flexible box model.

We might find mainly 3 different values of the display property namely flex, box and flexbox. What is the difference between these three flexible box models and which one to use?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Kevin
  • 6,539
  • 5
  • 44
  • 54
  • 4
    Hu? New values of `display` don't make the old ones "outdated". Especially `inline` and `block` which effects are desired since the invention of writing 5,000+ years ago: "*continue to the end of line and then create a new one and so on*" and "*one per line please*" – FelipeAls Mar 27 '13 at 15:44
  • CSS-Tricks' [article about Flexbox](http://css-tricks.com/using-flexbox/) can be useful for you. – Marat Tanalin Mar 28 '13 at 00:24

2 Answers2

42

You use whichever ones you need for the browsers you need to support.

display: box

  • Firefox 2.0? (prefixed)
  • Chrome 4.0? (prefixed)
  • Safari/iOS 3.1? (prefixed)
  • Android 2.1 (prefixed)

As far as I can tell, wrapping via box-lines: multiple is not implemented in any browser.

display: flexbox

  • Chrome 17-?? (prefixed)
  • Internet Explorer 10 (prefixed)

display: flex - the current standard

  • Chrome 21 (prefixed), 29 (unprefixed)
  • Opera 12.1 (unprefixed), 15 (webkit prefix)
  • Firefox 22 (unprefixed)
  • Safari/iOS 7 (prefixed)
  • Blackberry 10 (prefixed)
  • Internet Explorer 11 (unprefixed)

http://caniuse.com/#feat=flexbox (Note that IE10 is the only browser marked as having partial support that supports wrapping)

The specs for flexbox and flex are similar enough there's no reason not to include both, especially since IE10 only supports the flexbox spec. The spec for box is very different and might not be worth including depending on the effect you're after, even though nearly all properties have an analog to the ones found in the flexbox/flex specs.

You may find that there are some browsers that support multiple specs. There will likely come a time where they will drop support for the older spec, so always make sure you include the flex properties.

Community
  • 1
  • 1
cimmanon
  • 67,211
  • 17
  • 165
  • 171
  • 2
    By "*prefixed*" he probably means `display: -webkit-flex`. So "*unprefixed*" means `display: flex` – cregox May 12 '15 at 19:04
  • `caniuse` offers many useful links under resources but most of them don't get it quite right about Safari compatibility ([bennettfeely](http://bennettfeely.com/flexplorer/) does it right, with the same list as here at least for the current standard) so I wonder how much they're right about the other browsers. – cregox May 12 '15 at 19:05
16

As far as I know, the above three different versions of the flexible box model can be classified by their ages.

  1. display: box - This was the first flexible box model that was accepted as the newest model around the year 2009. Don't use it.

  2. display: flexbox - This flexible box model came in the year 2011 which was still in its development. Don't use it.

  3. display: flex - This is the newest flexible box model that currently finds its place as the latest box standard. This might further undergo some changes but this is preferred to the other two standards.

Kevin
  • 6,539
  • 5
  • 44
  • 54
  • 8
    As a matter of fact, the other two versions can't really be considered "standards" anymore since the latest one effectively replaces them altogether. – BoltClock Mar 27 '13 at 15:25
  • 2
    display: -webkit-box is still used today by new websites because it's the only way -webkit-line-clamp will work, and that's the only way to make an element have a maximum amount of lines of text. – Curtis Aug 14 '19 at 20:48