-webkit-flex does not display properly on Android

Question

After implementing the wonderful display:flex capabilities, I made a web page that looks exactly the way I want it to be viewed in Chrome 26 on Windows. However, it does not work in Chrome 26 on my Android and does not work in Android 4.1 browser in my emulator. According to caniuse , all of these browsers must support it.

Perhaps coincidentally, it looks like it looks in Android (as far as I can tell), just like it looks when I switch to the old version of display:box .

Here's what it looks like on Windows and Android:

My question is: how can I prevent these problems with multiple devices? Perhaps using something other than flexible until it becomes more standard would be better. Can someone provide me with a working example that does not use flex, or works on Android? This is for a mobile web application. Any help is much appreciated. Links to my code below.

With -webkit-flex: JSFiddle

With Field: JSFiddle

Answer 1

For the curious, I completely rewrote my code so as not to use flex. Here is a link to JSFiddle which is great for my purposes. http://jsfiddle.net/8juSk/

It uses box and box-ordinal-group , as suggested by @cimmanon.

Answer 2

There are 3 Flexbox drafts with various properties / values ​​to be aware of. Caniuse only makes a distinction between browsers that support the current project ("support") and those that support any of the old drafts ("partial support").

To maximize browser support, you simply enable all of them, from the oldest to the latest versions.

 .foo { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .bar { -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } 

Although all versions of Android currently support the old features of 2009, they are likely to be removed in the future in favor of standard features. Also note that Blackberry 10 is listed as supporting the current standard, and not one of the old drafts.