javascript - android 2.x - 4.3.x phonegap 不支持 flexbox css3

Question

我正在使用 phonegap 开发应用程序。我想在我的运动场中使用 flexbox，但我遇到了这个问题:

Chrome、Mozilla、android 4.4 - http://i.stack.imgur.com/1aunA.jpg

安卓 - 2.x - 4.3.x - http://i.stack.imgur.com/yqIf0.jpg

  playfield {
  width: 408px;
  height: 408px;
  margin: 0px;
  padding: 0px;
  margin-left: auto;
  margin-right: auto;
  display: -webkit-box;
  display: -moz-box;
  display: -o-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: space-around;
  -moz-box-pack: space-around;
  -ms-flex-pack: space-around;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}

playitem {
  width: 100px;
  height: 100px;
  margin: 0px;
  padding: 0px;
  background-color: #EEEEEE;
  border-collapse: 
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -o-flex-shrink: 0;
  -ms-flex-shrink: 0;
  flex-shrink: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -o-flex-grow: 0;
  -ms-flex-grow: 0;
  flex-grow: 0;
  line-height: 100px;
  text-align: center;
  color: #EEEEEE;
}

请帮我解决这个问题;(

Answer 1

支持现代原生移动浏览器

您现在可以在大多数 native 移动浏览器上使用现代 flexbox 语法，这意味着它也可以在 phonegap View 中工作。

旧的原生移动浏览器

在 Android 4.1、4.3、Safari 5.1 上您可以使用 old flexbox在 IE10 中是 2012 syntax .

Automagic 解决方案

如果您想自动设置前缀和旧/2012 语法，您可以使用 autoprefixer .

如果您使用 grunt或 gulp您可以自动为您的工作流程添加前缀。