CODEWITHSUNDEEP
javascriptandroidcssflexbox
Сергей Близнюк
Сергей Близнюк

Reputation: 55

android 2.x - 4.3.x phonegap doesn't support flexbox css3

I am developing and app with phonegap. I wanted to use the flexbox in my playfield, but i have this issue:

Chrome, Mozilla, android 4.4 - https://i.sstatic.net/1aunA.jpg

android - 2.x - 4.3.x - https://i.sstatic.net/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;
}

Please, help me to fix this issue ;(

Upvotes: 3

Views: 3543

Answers (1)

hitautodestruct
hitautodestruct

Reputation: 20830

Support modern native mobile browsers

You can use the modern flexbox syntax on most native mobile browsers today meaning it will work in phonegap view as well.

Older native mobile browsers

On Android 4.1, 4.3, Safari 5.1 You can use old flexbox and in IE10 the 2012 syntax.

Automagic solution

If you want to automatically set the prefixes and old/2012 syntax automatically you can use autoprefixer.

If you use grunt or gulp you can automagically add prefixes to your workflow.

Upvotes: 3

Related Questions