基础布局设置 |
您所在的位置:网站首页 › div内文字垂直居中 › 基础布局设置 |
流式布局 容器组件默认弹性布局未开启,处于流式布局的状态,如图1所示。 图1 流式布局![]() 在流式布局中,组件默认为块级(Block)元素,即不论组件宽度是多少,默认占据全部父级元素的宽度。如图2所示,向画布中拖拽一个“容器”组件,再向“容器”组件中拖入两个“标题”组件,“标题”组件为块级元素,默认占据全部父级元素宽度,即外层“容器”的宽度,第二个“标题”组件会在第一个“标题”组件的下方。 图2 流式布局中组件为块级元素![]() 流式布局中,组件由上至下依次排布,可以通过“水平对齐方式”对容器内组件进行水平位置调整,如图3、图4所示。 图3 居中水平对齐![]() ![]() 将“容器”组件属性面板中的“弹性布局”开启后,布局由流式布局切换到弹性布局,弹性布局的相关配置属性在下方出现如“排列方向”、“水平对齐方式”和“垂直对齐方式”,如图5所示。 图5 弹性布局![]() 为了方便说明弹性布局,向画布中拖拽一个“容器”组件,再向“容器”组件中拖入五个“容器”组件,将每个“容器”组件的宽度和高度设置为100px,并为每个“容器”组件设置不同的背景颜色,在每个“容器”中加入一个“标题”组件,分别显示A、B、C、D、E。 默认弹性布局下,排列方向为“行”,水平对齐方式为“起点对齐”,垂直对齐方式为“起点对齐”,如图6所示。 图6 弹性布局默认效果![]() 排列方向属性决定了容器内组件的排列方向。当排列方向为“行”时,容器内组件从左到右排布。排列方向为“列”时,容器内组件从上到下排布,如图7。 图7 排列方向“列”![]() 水平排列方式属性,决定了容器主轴方向排列方式。当容器排列方向为“行”时,水平排列方式属性作用于水平方向。当容器排列方向为“列”时,水平排列方式属性作用于垂直方向。排列方向为行时起点为左,水平对齐方式选择“中间对齐”和“终点对齐”时,如图8、图9所示。 图8 水平对齐方式选择“中间对齐”![]() ![]() 垂直排列方式属性决定了容器交叉轴方向排列方式。当容器排列方向为“行”时,垂直排列方式属性作用于垂直方向。容器排列方向为“列”时,垂直排列方式属性作用于水平方向。当容器排列方向为行时起点为上,垂直对齐方式选择“中间对齐”和“终点对齐”时,如图10、图11所示。 图10 垂直对齐方式选择“中间对齐”![]() ![]() 通过对弹性布局属性的不同组合配置,实现用户想要实现的布局效果。例如,将排列方向设置为“行”,水平对齐方式和垂直对齐方式设置成“中间对齐”,实现居中布局的效果,如图12所示。 图12 弹性布局实现居中![]() |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |