美文网首页
布局-弹性布局

布局-弹性布局

作者: MisShop智能开发平台 | 来源:发表于2018-11-07 17:47 被阅读0次

    1.弹性布局的元素宽度

    整个弹性布局的宽度是12栏。可以给弹性布局下的每个格子都占有一定宽度,空单元格不占宽度。

    一个格子一般占1栏(当然如果整行元素太少,每个元素的宽度会增加,例如整行只有6个元素,那么每个元素占2栏,以此类推)。如果某个元素是合并格,那么占有合并格数的宽度。

    可以通过弹性布局下的某个格子的样式配置,来手动设置格子的宽度。

    弹性布局中如果格子宽度总和太多,默认是挤压显示,可以通过样式设置改为换行或者反向换行。

    2.弹性布局下的格子的样式

    弹性布局下的格子具有自己独特的样式。
    例如选中A1,点击右上的样式配置。可以看到多了一个弹性容器元素的样式组。

    弹性布局子元素样式
    分栏宽度:代替默认的宽度,可以设置该格子占有的宽度,12栏就是占有全部宽度。平分表示和其他平分的格子一起平分所有剩余的宽度。例如 A1格就是平分,那么实际占有的会是除了剩余的5个格子之外的7栏宽度。
    分栏偏移:表示这个格子前面要留几栏空白。
    纵向自身对齐:表示这个格子是向上对齐,还是向下对齐...如果整个弹性布局容器设置的向下对齐,而这个格子向上对齐,那么其他都会向下对齐,而该格子向上对齐。
    行内水平对齐:居左,居中,居右。

    3.弹性布局的样式配置一

    继续上一章表格布局,我们以列表页面的标题和按钮区为例来学习弹性布局。
    选中弹性区域的某一格例如A1,鼠标右键选中区域(或者Ctrl+3),再鼠标右键选中样式(或者按设计器右上角的样式配置,或者Ctrl+2)。

    我们可以看到弹性布局区域的样式如下:

    弹性布局容器样式配置1
    主轴排列方向:指的这一行的元素可以从左向右排列,也可以从右向左排列,还可以从上到下,或者从下往上。
    主轴对齐方式:头对齐,尾对齐,居中对齐,分散对齐等。
    • 主轴排列方向:默认从左到右,我们选中从右到左,看看效果。
    主轴排列方向由右向左

    可以看到,容器下的格子的显示顺序反过来了。


    4.弹性布局的样式配置二

    弹性布局容器样式配置2
    换行方式:默认式不换行,如果内容太多就挤压,可以选择混行或者反向换行。
    交叉轴对齐:对于常见的从左到右的布局来说,就是纵向的对齐,这一排元素是向上对齐,向下对齐,居中对齐,还是拉伸。

    相关文章

      网友评论

          本文标题:布局-弹性布局

          本文链接:https://www.haomeiwen.com/subject/yzbrpftx.html