CODEWITHSUNDEEP
androidcsscordova
Irshad kk
Irshad kk

Reputation: 11

Android PhoneGap does not support CSS3 Flexbox

Does anybody know whether PhoneGap's Android browser supports CSS3 flex box? When I run the code in browser it worked correctly but when it comes to my Android device it does not work.

Here is the code:

.di {
    float:left;
    width:100%;
    text-align:left;
    display:flex;
}

.di span {
    background:url('img/smallphone.png') no-repeat;
    height:15px;
    border:1px solid #005522;
    float:left;
    width:24.2%;
    text-align:center;
    border-radius: 10px;
    background-color:white;
    flex:1
}

Upvotes: 1

Views: 3694

Answers (1)

QuickFix
QuickFix

Reputation: 11721

Actually, phonegap does not support any css.

Phonegap uses a webview, which means it uses the default browser of the device.

So the css support depends on the browser of the device, which means you will have different css behaviour with the same app if you run it on an android 2.3, 4.0, 4.1 or 4.4.

And sometimes the support may be different for a given version of android if you use different brand of device.

That's the main problem with phonegap.

That said, it seems flex box are supported since android 2.1 : http://caniuse.com/#feat=flexbox but you need to add the prefix -webkit

try this : 

.di {
    float:left;
    width:100%;
    text-align:left;
    display: -webkit-flex;
    display:flex;
}
.di span {
    background:url('img/smallphone.png') no-repeat;
    height:15px;
    border:1px solid #005522;
    float:left;
    width:24.2%;
    text-align:center;
    border-radius: 10px;
    background-color:white;
    -webkit-flex: 1;
    flex:1;
}

Upvotes: 1

Related Questions