Weex 03 UI的基本使用

前言

UI这方面，无论你以前是从事前端或者移动端，多联系一下，还是很容易上手。

正文

一些要记住的知识点

• 在 Weex 中，Flexbox 是默认且唯一的布局模型，所以你不需要手动为元素添加 display: flex; 属性。Flexbox和Android原生相比适配性更强。
• weex中的长度单位只有px;
• 屏幕默认的宽度为750px,高度约为1250px，

flexBox布局概念

weex中使用的是flexbox布局，Android过来的同学需要看一下这个flexbox。前端的同学的话也需要适应一下，weex的flexbox是不支持百分比参数的。

flexBox宽高不支持百分比设定。使用flexBox需要记住几个参数：

1. flex-direction：
   定义了flex容器中flex成员项的排列方向(row:从左到右排列，column:从上到下排列),，默认为column。
2. justify-content：
   定义了flex容器中flex成员项在 主轴 方向上如何排列以处理空白部分。可选参数有：flex-start | flex_end | center | space-between。默认值为flex-start。
   
   

   justify-content各个参数的效果
3. align-items：
   定义了 flex 容器中 flex 成员项在 纵轴 方向上如何排列以处理空白部分。可选值为 stretch | flex-start | center | flex-end，默认值为 stretch。
   
   

   align-items各个参数的效果
4. Flex成员项:
   该参数仅支持在flexBox内的控件使用。flex属性定义了flex 成员项可以占用容器中剩余空间的大小。如果所有的成员项设置相同的值 flex: 1，它们将平均分配剩余空间. 如果一个成员项设置的值为 flex: 2,其它的成员项设置的值为 flex: 1，那么这个成员项所占用的剩余空间是其它成员项的2倍。

初步编写

初始化页面

• 这是我们项目初始化后的页面，页面代码分为三个部分：