Android 2.x - 4.3.x phonegap does not support flexbox css3
I am developing and application with telephony. I wanted to use flexbox in my playfield, but I have this problem:
Chrome, Mozilla, android 4.4 - http://i.stack.imgur.com/1aunA.jpg
android - 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;
}
Please help me fix this problem; (
+3
source to share
1 answer
Support for modern mobile browsers
You can use modern flexbox syntax for most mobile browsers today, which means it will work as a phone call too.
Older mobile browsers
In Android 4.1, 4.3, Safari 5.1, you can use the old flexbox , and in IE10, the syntax is 2012 .
Automatic solution
If you want to automatically set the prefixes and syntax of old / 2012 automatically, you can use autoprefixer .
If you are using grunt or gulp you can automatically add prefixes to your workflow.
+3
source to share