微信小程序应该如何布局(小程序布局的最佳框架)

1:灵活布局

Flex布局如图1所示。

图1

1.1 Flex容器属性

1.2 flex容器中的元素属性

如果对齐定义将覆盖由容器属性中的justify-content和align-items设置的属性。

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

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

& ltview class = & quot集装箱& quot& gt& ltview class = & quot项目& quot& gt1 & lt/view & gt；& ltview class = & quot项目& quot& gt2 & lt/view & gt；& ltview class = & quot项目& quot& gt3 & lt/view & gt；& ltview class = & quot项目& quot& gt4 & lt/view & gt；& lt/view & gt；在layout.wxss中添加以下代码:

. container1{高度:100%；宽度:100%；background -颜色:米色；} . item 1 { height:100 rpx；宽度:100rpxbackground -颜色:青色；Border: 1px solid #fff}被编译并运行，如图2所示。

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

图2

修改container1如下:(添加显示:flex)编译操作如图3所示:可以看出flex布局是默认的水平排列的元素。

. container1{高度:100%；宽度:100%；background -颜色:米色；显示器:flex}

图3

1.1.1容器属性:flex -方向

将下面的代码添加到。container1:表示设置flex布局的垂直排列元素(横轴从左到右，主轴从上到下)，如图2所示。(row:flex layout水平排列元素& # 8212；从左到右作为主轴，从上到下作为横轴)

flex+方向:列1.1.2容器属性:flex -换行

将下面的代码添加到。container1:同时将元素代码复制到layout.wxml中的八个元素视图，编译运行，效果如图4所示。可以看到，原来的高度和宽度是100rpx，正方形的视图被改造成了长方形。

flex-wrap:nowrap

图4

如果修改成下面的代码:编译运行如图5所示:确保每个子视图都是正方形的，然后把放不下的第八个子视图放到下一行。

flex -包装:包装

图5

1.1.3容器属性:flex-flowflex-flow: wrap row，编译运行结果:如图5所示，flex-flow相当于flex-direction和flex-wrap的组合。

1.1.4容器属性:justify-content将以下代码添加到. container1中:编译和操作如图6所示。表示主轴上的对齐，因为上面的代码我们设置了flex -flow:wrap row & # 8212；相当于主轴从左到右，所以一行不能显示的第八个元素显示在下一行的中间，而前七个子视图也显示在一行的中间，左右两边留空白。

justify -内容:中心

图6

编译运行just -content:flex -end(如果主轴是左到右:右对齐)的效果如图7所示:

图7

Justify-content:flex-start(主轴从左到右时:左对齐)显示Justify -content:space -环绕---的效果如图8所示，每个子视图的左右都有边距

图8

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

图9

1.1.5容器属性:align -项目主轴上的对齐已经在上面详细说明。这里，这个横轴上的对齐也很简单，就不详细展开了。

1.2.1容器中元素的属性:flex-growlayout.wxml中修改的代码如下:增加了i3。

& ltview class = & quotitem1 i3 & quot& gt3 & lt/view & gt；layout.wxss中修改后的代码如下:add: flex-grow: 1和item1中的i3，意思是如果一行中有剩余空间，除i3以外的子视图占一个空间，而i3的子视图占两个空间。编译运行效果如图10所示:可以看出，i3view占用的空间比其他三个子视图要大，但不是两倍。

. item 1 { height:100 rpx；宽度:100rpxbackground -颜色:青色；边框:1px solid # fffflex -增长:1 } . i3 { flex -增长:2}

图10

1.2.2容器中元素的属性:flex-shrinklayout.wxml增加4个子视图。

layout.wxss中修改的代码如下:i3的flex-shrink为0，其他子视图为1，表示空间不足时所有子视图都缩小，但i3的视图保持大小不变，于是编译运行，效果如图11所示。

. item 1 { height:100 rpx；宽度:100rpxbackground -颜色:青色；边框:1px solid # fffflex -收缩:1 } . i3 { flex -收缩:0}

图11

1.2.3容器中元素的属性:flex-basislayout.wxss中修改后的代码如下:其他代码保持不变，编译运行，效果如图12所示。

. i3 { flex -shrink:0；flex -基础:200rpx}

图12

1.2.4容器中元素的属性:flexflex是grow、shink、basis属性的组合，layout.wxss中修改后的代码如下:其他代码保持不变，编译运行，效果与图12相同。

container: orderlayout.wxml中. i3 {flex: 0 0 200 RPX} 1.2.5元素属性中的修改代码如下:将每个视图的order属性设置为其显示顺序，编译运行。

& ltview class = & quot集装箱& quot& gt& ltview class = & quot项目& quotstyle = & quot订单:4 & quot& gt1 & lt/view & gt；& ltview class = & quot项目& quotstyle = & quot订单:3 & quot& gt2 & lt/view & gt；& ltview class = & quotitem1 i3 & quotstyle = & quot订单:2 & quot& gt3 & lt/view & gt；& ltview class = & quot项目& quotstyle = & quot订单:1 & quot& gt4 & lt/view & gt；& lt/view & gt；相信你看完这个案例已经掌握了方法。更多精彩请关注即时码站其他相关文章！

推荐阅读:

微信小程序开发中如何实现地址页的三级联动

新手如何开发第一个微信小程序？