Android PhoneGap 不支持 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 使用 webview，这意味着它使用设备的默认浏览器。

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

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

这是 phonegap 的主要问题。

也就是说，自 android 2.1 以来似乎支持 flex box: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;
}