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

布局-弹性布局

作者: 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
换行方式:默认式不换行,如果内容太多就挤压,可以选择混行或者反向换行。
交叉轴对齐:对于常见的从左到右的布局来说,就是纵向的对齐,这一排元素是向上对齐,向下对齐,居中对齐,还是拉伸。

相关文章

  • Flutter布局Widget--弹性布局、线性布局、流式布局和

    前言 本文我们要介绍 Flutter 中布局 Widget,包括弹性布局、线性布局流式布局和层叠布局。 一、弹性布...

  • flutter 动手篇2 - 弹性布局 Flex

    弹性布局 Flex 弹性布局 弹性布局允许子widget按照一定比例来分配父容器空间,弹性布局的概念在其UI系统中...

  • CSS3弹性布局 flexible boxes

    W3弹性布局: 弹性布局父容器(Flex Containers) 弹性布局子项(Flex Items) 子项于父容...

  • css:About Flex

    * 弹性布局 * 创建弹性布局容器:flex containerdisplay:flex 1.弹性元素 flex ...

  • flex布局

    1、什么是flex布局? flex布局又叫弹性布局,弹性盒子,与怪异和模型布局不同,其布局能更精准。 2、如何设置...

  • 弹性布局总结

    1.flex弹性布局学习总结 2.弹性盒模型布局使用 布局案例: ...

  • 从0开始学习HTML5CSS3(三)

    弹性布局 弹性(伸缩)布局:是C3里新出的一种布局方式只是多一种布局的选择特点: 1.用了弹性布局后,可以让子元素...

  • 移动端开发

    视口 屏幕适配 布局 流体布局 响应式布局 rem布局 弹性盒模型布局

  • 三列布局之圣杯布局、双飞翼布局

    圣杯布局 双飞翼布局 使用flex弹性布局实现

  • 布局-弹性布局

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

网友评论

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

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