weex常用属性梳理

　　之前发了一篇weex集成和开发的博客，主要是讲了weex开发环境的搭建和文件的编译、部署，还有就是一些个人对weex的理解，最近将原生的项目改造成weex的项目，也持续了有两个多月的时间了，后面我会发一些有关weex技术的博客，可能有些人看到了会感觉没什么很高的技术含量，主要是为了记录自己学习到的东西以及开发过程中遇到的一些困难。

　　首先，第一篇记录开发中会非常经常用到的一些属性：

　　对于元素的margin、padding、border这些属性就不做说明了，和Android原生没什么大区别

flex-direction：定义父容器中子元素的排列方向，可选值为 row | column，默认值为 column
column:从上到下排列
row：从左到右排

justify-content：定义父容器中子元素在水平方向上的排列方式，可选值为 flex-start | flex-end | center | space-between，默认值为 flex-start。
flex-start：是默认值，所有的 flex 成员项都排列在容器的前部；
flex-end：则意味着成员项排列在容器的后部；
center：即中间对齐，成员项排列在容器中间、两边留白；
space-between：表示两端对齐，空白均匀地填充到 flex 成员项之间。
这其中最常用到的是center、space-between，center就没有什么好说的了，就是水平居中，至于space-between，我们可以配合margin-left和margin-right去实现一些效果。

这块试一下如果有多个元素space-between会是什么样的效果：

<div style="width: 500px;height: 300px;flex-direction: row;justify-content: space-between;background-color: brown;align-items: center">
        <text style="font-size: 40px;color: #0088fb">111</text>
        <text style="font-size: 40px;color: #0088fb">222</text>
        <text style="font-size: 40px;color: #0088fb">333</text>
        <text style="font-size: 40px;color: #0088fb">444</text>
    </div>

空白部分同样也是均匀的填充到各个元素之间，这块有个小问题，红色部分的div我是设置了固定的宽、高，如果我想让div水平充满屏幕，在Android中可以设置match_parent，在weex中是没有类似的属性的，只能给宽度设置固定的750px，看到这可能会想到，这样写固定的值，不会产生不同分辨率手机的适配问题吗？实际上是不会的，我也不是很理解其中的原理，大概的理解是：750px是weex定义的一个基础，我们在代码中设置的任何宽度最后都会去除这个基础，最后再乘实际手机的宽度，举个例子：一个手机的宽是1080，我们在代码中设置div的宽度为375px，375/750*100% = 50%，1080*50% = 540，正好是手机宽度的一半，以此类推，在其他手机上得到的结果仍然是手机宽度的一半，如此就完成了不同分辨率手机的适配。

align-items：定义父容器中子元素在垂直方向上的排列方式，可选值为 stretch | flex-start | center | flex-end，默认值为 stretch。
stretch 是默认值，即拉伸高度至 flex 容器的大小；
flex-start 则是上对齐，所有的成员项排列在容器顶部；
flex-end 是下对齐，所有的成员项排列在容器底部；
center 是中间对齐，所有成员项都垂直地居中显示。

这个没什么好说的，最常用的就是center，垂直居中。

flex：定义了父容器中子元素可以占用容器中剩余空间的大小。
如果所有的成员项设置相同的值 flex: 1，它们将平均分配剩余空间。
如果一个成员项设置的值为 flex: 2，其它的成员项设置的值为 flex: 1，那么这个成员项所占用的剩余空间是其它成员项的2倍。
这就类似于Android里面的权重layout_weight

    <div style="flex-direction: row;background-color: brown">
        <div style="flex-direction: row;background-color: burlywood;flex: 1"></div>
        <div style="flex-direction: row;background-color: aqua;flex: 2"></div>
        <div style="flex-direction: row;background-color: blueviolet;flex: 1"></div>
    </div>