之前發了一篇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>
