弹性布局要点

弹性盒子布局，适用于高或宽或高宽都已知的元素进行分割的布局。

当设定一个容器采用弹性盒子布局时，要使用ub进行定义。当需要纵向布局时，需要再附加ub-ver来进行设定。当需要对弹性盒子内的子元素进行横向居中、居右对齐或者纵向居中、居下对齐时需要为容器设定ub-ac、ub-ae和ub-pc、ub-pe进行设定，容器默认子元素居左、居上对齐。

容器中的子元素分为可自行确定高宽的元素和弹性高宽的元素。自行确定高宽的元素一种是通过直接设定元素样式的高度宽度来定义，例如

  1. <div style=”width:30px”></div>

和通过元素内部内容大小来确定高宽的元素，例如

<div>范例</div>

弹性高宽的元素则需要使用ub-f1、ub-f2、ub-f3、ub-f4等进行设定，分别表示占用1到4份。那么容器中的子元素每一份占用的高宽可以通过如下公式计算得到,以横向弹性布局为例确定高宽的元素，例如

<div>范例</div>

弹性高宽的元素则需要使用ub-f1、ub-f2、ub-f3、ub-f4等进行设定，分别表示占用1到4份。那么容器中的子元素每一份占用的高宽可以通过如下公式计算得到,以横向弹性布局为例

1份宽度 = (W - SUM(已知宽度元素的宽))/SUM(每个弹性元素占用份数)

上述公式的意思是，使用容器的总宽度减去所有已知宽度元素的宽度得到的差除以容器中所有弹性元素占用的总份数得到一份占用的宽度。例如一个容器宽度为200px，包含一个宽度为24px的元素、一个宽度32px的元素、一个占用1份空间的元素、一个占用2份空间的元素。那么一份宽度即为

w = (200 - (24 + 32))/(1+2)=48

那么四个元素的宽度分别为 24px、32px、48px、96px。

注:弹性盒子布局中使用的 ub ub-ver ub-ac ub-pc ub-f1 等是对弹性布局CSS样式的封装，可参考 ui-box.css 文件查看具体样式属性

ub-ac、ub-ae和ub-pc、ub-pe两组属性用于控制弹性盒子容器子元素的对齐属性，当弹性盒子为横向模式时，ub-ac、ub-ae代表纵向居中对齐和底部对齐，ub-pc和ub-pe代表横向居中对齐和右对齐，但当弹性盒子容器采用ub-ver进行纵向布局时，ub-ac、ub-ae和ub-pc、ub-pe的作用会正好相反。通过UI设计器的控制图标可以很清晰看到和使用。

弹性布局要点 - 图1