Geek Answers Handbook

CSS Flexbox layout: old version (for working with the old browser)

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

My question is: are these versions different?

display: webkit-box;

display: box;

I know the version of OLD syntax, but who is older?

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

0
source share
2 answers

: -webkit-box -moz-box - , 2009 . display: box w/o , .

-webkit-box - . .

. ( ):

.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+ */
}
0

, display:webkit-box, display: box, , (Flexbox 1). , (-webkit, -moz ..), . , , -webkit-box , , , Flexbox 1.

, , , , . , Flexbox :

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)
-1

More articles:


All Articles