1.弹性布局的元素宽度
整个弹性布局的宽度是12栏。可以给弹性布局下的每个格子都占有一定宽度,空单元格不占宽度。
一个格子一般占1栏(当然如果整行元素太少,每个元素的宽度会增加,例如整行只有6个元素,那么每个元素占2栏,以此类推)。如果某个元素是合并格,那么占有合并格数的宽度。
可以通过弹性布局下的某个格子的样式配置,来手动设置格子的宽度。
弹性布局中如果格子宽度总和太多,默认是挤压显示,可以通过样式设置改为换行或者反向换行。
2.弹性布局下的格子的样式
弹性布局下的格子具有自己独特的样式。
例如选中A1,点击右上的样式配置。可以看到多了一个弹性容器元素的样式组。
弹性布局子元素样式
分栏宽度:代替默认的宽度,可以设置该格子占有的宽度,12栏就是占有全部宽度。平分表示和其他平分的格子一起平分所有剩余的宽度。例如 A1格就是平分,那么实际占有的会是除了剩余的5个格子之外的7栏宽度。
分栏偏移:表示这个格子前面要留几栏空白。
纵向自身对齐:表示这个格子是向上对齐,还是向下对齐...如果整个弹性布局容器设置的向下对齐,而这个格子向上对齐,那么其他都会向下对齐,而该格子向上对齐。
行内水平对齐:居左,居中,居右。
3.弹性布局的样式配置一
继续上一章表格布局,我们以列表页面的标题和按钮区为例来学习弹性布局。
选中弹性区域的某一格例如A1,鼠标右键选中区域(或者Ctrl+3),再鼠标右键选中样式(或者按设计器右上角的样式配置,或者Ctrl+2)。
我们可以看到弹性布局区域的样式如下:
弹性布局容器样式配置1
主轴排列方向:指的这一行的元素可以从左向右排列,也可以从右向左排列,还可以从上到下,或者从下往上。
主轴对齐方式:头对齐,尾对齐,居中对齐,分散对齐等。
- 主轴排列方向:默认从左到右,我们选中从右到左,看看效果。
主轴排列方向由右向左
可以看到,容器下的格子的显示顺序反过来了。
4.弹性布局的样式配置二
弹性布局容器样式配置2
换行方式:默认式不换行,如果内容太多就挤压,可以选择混行或者反向换行。
交叉轴对齐:对于常见的从左到右的布局来说,就是纵向的对齐,这一排元素是向上对齐,向下对齐,居中对齐,还是拉伸。
网友评论