Android PhoneGap does not support CSS3 Flexbox

Question

有人知道PhoneGap的Android浏览器是否支持CSS3 flex box吗？当我在浏览器中运行代码时，它工作正常，但当涉及到我的 Android 设备时，它不起作用。

这是代码：

.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
}

Answer 1

实际上，phonegap不支持任何css。

Phonegap使用Web视图，这意味着它使用设备的默认浏览器。

因此，css 支持取决于设备的浏览器，这意味着如果您在 android 2.3、4.0、4.1 或 4.4 上运行同一应用程序，您将对同一应用程序有不同的 css 行为。

有时，如果您使用不同品牌的设备，则给定版本的Android的支持可能会有所不同。

这是Phonegap的主要问题。

也就是说，似乎从android 2.1开始支持弹性框：http://caniuse.com/#feat=flexbox 但您需要添加前缀-webkit

试试这个：

.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;
}