CSS Flexbox layout: old version (for working on old browser)

Question

I understand that there is 3 version of FlexBox in CSS. Old, Tweener and New: according to: http://css-tricks.com/old-flexbox-and-new-flexbox/

My question: does that versions are different?

display: webkit-box;

display: box;

I know is the OLD syntax version but which one is older?

And for older browser compatibility (android browser 2.3) which one do I need to use?

Capacious

might be helpful for you. #16596087 – Urumchi

Thx man but I didn't find the answer to my question. Which one is the older? – Capacious

Answer 1

To answer your question, both display:webkit-box and display: box are basically the same version (Flexbox version 1). It's just that different browsers started implementing new properites first with a prefix (-webkit, -moz, etc) and then started supporting without the prefix. I guess technically you can say that the -webkit-box is older since that's what browsers supported first, but it's the same Flexbox version 1.

To cover all browser versions, list all browsers prefixes for that property and then finally end without the prefix. So for this version of Flexbox, it would be:

display: -moz-box; //Firefox
display: -ms-box; //IE (in theory only, wasn't implemented. Not for use) 
display: -webkit-box; //Safari, Chrome
display: box; //W3C offical spec (in theory only, wasn't implemented. Not for use) 

Ripp

Answer 2

The correct answer is that -webkit-box and -moz-box are the two you need to use for the 2009 syntax. display: box w/o prefix should not be used, as it was never implemented by any browser.

A syntax with prefixes like -webkit-box is always the early implementation of a specs by a browser. The prefixed rule always comes first before the final standard.

As discussed here or here. The full proper syntax of the main container (for all browsers) is:

.flex-container {
  display: -webkit-box;  /* Safari 3.1 - 6, Chrome < 21 (2009 Spec), UC Browser Android */
  display: -moz-box;     /* Firefox 2 - 27 (2009 Spec), UC Mini */
  display: -ms-flexbox;  /* IE10 (2012 Syntax) */
  display: -webkit-flex; /* Safari 6.1 - 8, Android < 4.4, BB < 10, Chrome 21 - 28 */
  display: flex;         /* Edge 12+, Firefox 28+, Blink, Safari 9+, Opera Mini 8+ */
}

Pantywaist