weex--css样式

由于WEEX支持的Css写法有限，所以我们需要了解他。目前布局只支持flex

Box左右居中（可代替text-align）：

    align-items: center;

Box上下居中等：

    justify-content: center;

有时候有些运气差的人会觉得，咦！

text-align 没有效果，等等....

是这样的，估计是你选择器错了，正确的选择器是这样的

/* √ */
.a{
 text-align: center;
}
/* × */
.box .a{
 text-align: center
}

百分比（如屏幕宽度的一半50%）：

// view Tag
  <a :style="width">
    <text>我的</text>
  </a>

// js
   data(){
        return {
            width: {
                width: weex.config.env.deviceWidth/2+'px'
            }
        }
    }

是不是很麻烦？ 是啊，但是没有办法。

#######但真的可以么，太天真了，阿里的坑能埋这么小？

在App上，你会发现怎么大小不对劲（你再电脑预览确实是好的），我们看看weex官网怎么说的。

官方描述

瓦特？只有px？ 那我写比例怎么写啊。
weex有一个很重要的属性，750px === innerWidth100%

这其实就是变相的rem，github上面有人提的适配问题，其实用px就可以解决了。

 scale (value){
   return 750*value+'px'
}

所有的‘Css’属性都不可以简写

/* × */
.item{
 background: #F00;
 border: 1px solid #fff;
}
/* √ */
.item{
 background-color: #F00;
 border-right-width: 1px;
 border-color: rgba(0, 0, 0, 0.1);
}

过渡

transition-property: left;
transition-duration: 300ms;

<br />

---

官方链接： https://weex.apache.org/cn/references/common-style.html

OK

--END--