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>