有谁知道Android App版本是否不支持CSS3 flex box?当我在Application中运行代码时它工作正常,但是当涉及我的Android版本4.4.2设备时,它不起作用。
https://i.stack.imgur.com/qML0E.jpg
以下是代码:
[Ext.define('MobileUnity.component.PassCode', {
-
extend: 'Ext.Container',
xtype: 'passcode',
config: {
html: \[
'<div id="pin">',
'<div class="dots">',
'<div class="txtBox"><div class="dot" style="margin: 5px;"></div></div>',
'<div class="txtBox"><div class="dot" style="margin: 5px;"></div></div>',
'<div class="txtBox"><div class="dot" style="margin: 5px;"></div></div>',
'<div class="txtBox"><div class="dot" style="margin: 5px;"></div></div>',
'<div class="txtBox"><div class="dot" style="margin: 5px;"></div></div>',
'<div class="txtBox"><div class="dot" style="margin: 5px;"></div></div>',
'</div>',
// '<p>Enter the password</p>',
'<div class="numbers">',
'<div class="number selectNo" >1</div>',
'<div class="number selectNo" >2</div>',
'<div class="number selectNo" >3</div>',
'<div class="number selectNo" >4</div>',
'<div class="number selectNo" >5</div>',
'<div class="number selectNo" >6</div>',
'<div class="number selectNo" >7</div>',
'<div class="number selectNo" >8</div>',
'<div class="number selectNo" >9</div>',
'<div class="number selectNone fa fa-check"></div>',
'<div class="number selectNo">0</div>',
// '<div class="number fa fa-close"></div>',
'<div class="number selectDel fa fa-arrow-left"></div>',
'</div>',
'</div>'
\].join('')
}
});]
的CSS:
#pin {
margin: auto; color: #555; }
.dots { /*width: 50%;*/ display: -webkit-box; display:
-webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; padding: 1em 4em; /*padding-top: 3em;*/
}
.dot {
position: relative;
background: transparent;
border-radius: 5vw;
border: 2px solid #fff;
width: 5vw;
height: 5vw;
-webkit-transform: scale3d(0.7, 0.7, 0.7);
transform: scale3d(0.7, 0.7, 0.7);.
-webkit-flex: 1; }
.dot.active { -webkit-animation: growDot .5s ease; animation: growDot .5s ease; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; }
.dot.wrong { -webkit-animation: wrong .9s ease; animation: wrong .9s ease; }
.dot.correct { -webkit-animation: correct .9s ease; animation: correct .9s ease; }
.dot.ac-gold { -webkit-animation: bg-gold .5s ease; animation: bg-gold .5s ease; }
#pin p { font-size: .8em; }
.numbers { display: -webkit-box; display: -webkit-flex; display:
-ms-flexbox; display: flex; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-around;
-ms-flex-pack: distribute; justify-content: space-around; -webkit-align-content: flex-end; -ms-flex-line-pack: end; align-content: flex-end; margin: 0vw 8vw; /*margin: 3vw 8vw;*/ /*margin: 2em 0;*/ }
.number {
position: relative;
width: 22vw;
height: 18vw;
margin: 2vw;
border-radius: 18vw;
/*border: 2px solid #0066BB;*/
/*border: 2px solid rgba(255, 255, 255, 0); */
border: 2px solid #b0aca8;
text-align: center;
line-height: 18vw;
font-weight: 400;
font-size: 7vw;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: all .5s ease;
transition: all .5s ease; }