浅谈微信小程序的灵活布局基�

时间：2021-08-30 来源：互联网编辑：宝哥软件园浏览：次

1:灵活布局

Flex布局如图1所示

图1

1.1灵活容器属性

1.2 flex容器中的元素属性

如果定义了对齐，它将覆盖由容器属性中的对齐内容和对齐项设置的属性

在微信小程序开发项目中，新建文件布局，然后新建文件(以布局命名)。

在layout.wxml中添加以下代码：

view class=' container 1 ' view class=' item 1 ' 1/view view class=' item 1 ' 2/view view class=' item 1 ' 3/view view class=' item 1 ' 4/view/view在layout.wxss中添加以下代码：

. container 1 { height : 100%；宽度：100%；背景-颜色：米色；} . item 1 { height :100 rpx；宽度width:100rpx背景色：青色；Border: 1pxsolid # fff的编译操作如图2所示

注意：在上面的代码中，container1容器中添加了四个子元素view(item1)，并且在item1: 100rpx的样式文件中将每个item1的宽度和高度设置为固定值，item1:100 rpx是与屏幕大小相关的缩放单位，与固定px不同，每个item 1的边缘为1px、soliod和white (#fff)

图2

修改。容器1如下：(添加display:flex编译操作如图3所示：可以看到flex布局是元素的默认水平排列

. container 1 { height : 100%；宽度：100%；背景-颜色：米色；display:flex}

图3

1.1.1容器属性：灵活方向

将以下代码添加到。container1:设置flex布局的垂直排列元素(横轴从左到右，主轴从上到下)，如图2所示。(行：flex布局水平排列元素-从左到右是主轴，从上到下是横轴)

伸缩方向：列

1.1.2容器属性：灵活包装

将以下代码添加到container1:同时，将元素代码复制到layout.wxml中的8 elements视图，并编译运行。效果如图4所示。可以看到原来的高度和宽度都是100rpx，方形视图已经变形为矩形。

flex-wrap:nowrap

图4

如果修改为如下代码：编译操作如图5所示：保证每个子视图都是正方形的，然后把第八个不能放的子视图放到下一行

柔性包装：包装

图5

1.1.3容器属性：灵活流

Flex-flow:包装行、编译和运行结果：如图5所示，Flex-flow相当于flex-direction和flex-wrap的组合

1.1.4容器属性：调整内容

将以下代码添加到。容器1:编译操作如图6所示。说主轴上的对齐，因为上面的代码我们设置了flex-flow: wrap row -相当于主轴从左到右，所以第八个不能在一行显示的元素显示在下一行的中心，而前七个子视图也显示在一行的中心，左右两边都有空白边距。

调整内容：中心

图6

两端对齐(当主轴从左向右时：右对齐)

编译运行效果如图7所示：

图7

作为示例，没有显示调整内容：flex-start(从左到右主轴：左对齐)

对齐-内容：空格-效果如图8所示，每个子视图都有左右边距。

图8

对齐内容：间距效果如图9所示。每个子视图都有左右边距，但第一个和第二个视图是左右对齐的，没有边。

图9

1.1.5容器属性：对齐项目

主轴上的对齐上面已经详细说明了，但是这个横轴上的对齐也很简单，就不详细展开了。

1.2.1容器中的元素属性：flex-grow

layout.wxml中修改后的代码如下：添加i3

view class=' item1 i3 ' 3/view layout . wxss中修改后的代码如下：将flex-grow: 1添加到item 1，并添加i3，这意味着如果一行中还有剩余空间，i3外部的子视图占用1个空间，而i3的子视图占用2个空间。编译和运行效果如图10所示。可以看出i3view占用的空间比其他三个子视图大，但并不是这样。

. item1 { height:100rpx宽度width:100rpx背景色：青色；border: 1px实心# fffflex-grow : 1 } . i3 { flex-grow : 2 }