此教程会带领我们初步使用Smobiler4.0新增的相对布局。
相对布局，又称流式布局。
流式布局特点：在页面内，以控件之间相对位置或相对父容器位置进行排列
由于这已经算是进阶教学了，那么基础的创建项目这里就不细说了，如果有问题的朋友可以参考快速入门。
1. 将界面布局方式属性Layout设置为Relative
2. 控件和它的容器之间排列关系（Direction）
a)容器内元素横向排列（Direction：Column）
b)容器内元素竖向排列（Direction：Row）
3. 控件和它的容器之间侧抽的位置关系（ItemAlign）
控件和它的容器侧抽上有三种关系，如下：
a)控件向侧抽起始位置对齐（ItemAlign：FlexStart）
b)控件向侧轴的中间位置对齐（ItemAlign：Center）
c)控件向侧抽的终点位置对齐（ItemAlign：FlexEnd）
d)控件在侧轴方向被拉伸到与容器相同的高度或宽度（ItemAlign：Stretch）
4. 控件和它的容器之间主抽的位置关系
控件和它的容器主抽上有五种关系，如下：
a)控件向主抽起始位置对齐（JustifyAlign：FlexStart）
b)控件向主轴的中间位置对齐（JustifyAlign：Center）
c)控件向主抽的终点位置对齐（JustifyAlign：FlexEnd）
d)控件平均地分布在主轴中。第一个伸缩项目一行中的最开始位置，最后一个伸缩项目在一行中最终点位置（JustifyAlign：SpaceBetween）
e)控件平均地分布在主轴中。两端保留一半的空间（JustifyAlign：SpaceAround）
当容器控件中的子控件如果超出容器空间时，默认设置Wrap属性为Wrap；此时容器中的子控件将会自动换行。
a)不换行时（Wrap：NoWrap）
b)换行时（Wrap：Wrap）
容器控件的Direction为Column时，Flex影响控件的高度，容器控件的Direction为Row时，Flex影响控件的宽度。
a)Dirextion为Column，下图中的Button控件的Flex都设置1，因此每个控件的高度为外层容器控件高度的1/3，Button控件的Width设置0，Button控件的宽度则等于外层容器控件的宽度。
b)Dirextion为Row，下图中的Button控件的Flex都设置1，因此每个控件的宽度为外层容器控件宽度的1/3，Button控件的Height设置0，Button控件的高度则等于外层容器控件的高度。
1. 主轴：即当前容器控件中的子控件排列方向，主要分为Row（横向，添加子控件时，横向排列）和Column（纵向，添加子控件时，纵向排列）。如果设置了当前容器控件的排列方向为Row，那么主轴就是横向的。
2. 侧轴：与主轴相反的方向，如果主轴设置为Row，那么侧边即为Column。
示例参照SmobilerSamples
