纵向布局主要应用于对已经设定高度的元素进行纵向分块之前介绍的固定界面布局即为典型的弹性纵向布局。我们通过UI设计器来构建一个纵向布局的弹性盒子来解释其笁作原理

1.1、创建一个页面并命名为box-ver

1.2、在界面中添加一个Page并在Page中添加一个Box

1.3、修改Box布局属性，设定其高度并使其成为一个纵向向弹性盒子

1.4、在Box中插入一个Box组件一个文字Text组件

1.5、调整新加入的两个元素的属性

设定添加的Box占用父元素1份空间，并且设定Box的背景图（可以通过图片选择器选择图片选择器可以帮助选择放置于/css/res目录下的图片资源）和背景图效果。

设定Text控件为弹性盒子布局并设定其子元素按照横向居中对齊方式排列。通过次设定使Text控件的文字横向居中显示

1.6、保存并输出全部

对应于我们在设计器中的配置，容器Box中class属性里ub定义了此Box为弹性容器通过ub-ver设定其为纵向布局。加入的子Box控件通过ub-f1使其占据一份空间。文字Text控件的class属性里的ub ub-pc分别定义此Text控件也是一个弹性盒子且其子元素需要横向居中对齐。