小程序应该怎么布的局

　　介绍

这篇文章将为大家详细讲解有关小程序应该怎么布的局,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

<强> 1:Flex布局

Flex布局如图1所示

小程序应该怎么布局

图1

<强> 1.1 Flex容器属性

小程序应该怎么布局

<强> 1.2 Flex容器内元素属性

小程序应该怎么布局

对齐如果定义会覆写掉容器属性中的justify-content,对齐项目设置的属性

微信小程序开发工程中,新建文件布局,然后新建各种文件(以布局命名),

在布局。wxml中加入如下代码:

& lt; view 类=癱ontainer1"比; 　　,& lt; view 类=癷tem1"比; 　　,1 　　,& lt;/view> 　　& lt; view 类=癷tem1"祝辞 　　,2 　　,& lt;/view> 　　,& lt; view 类=癷tem1"比; 　　,3 　　,& lt;/view> 　　,& lt; view 类=癷tem1"比; 　　,4 　　,& lt;/view> 　　& lt;/view>

在布局。wxs中加入如下代码:

.container1 { 　　,,,身高:,100%; 　　,,,宽度:100%; 　　,,,背景颜色:米色; 　　} 　　.item1 { 　　,,,身高:100 rpx; 　　,,,宽度:100 rpx; 　　,,,背景颜色:青色; 　　,,,边界:1 px  solid  # fff 　　}

编译运行如图2所示

注:上述代码中在container1容器中加入了4个子元素视图(item1) item1的样式文件中设置每个item1的宽高为固定值:100 rpx rpx为与屏幕尺寸相关缩放的单位,不同于固定的px,每个item1的边为1 px,实线(soliod),白色(# fff)

小程序应该怎么布局

修图2改.container1如下:(增加显示:flex;)编译运行如图3所示:可以看出flex布局为默认横向排列元素

.container1 { 　　,,,身高:,100%; 　　,,,宽度:100%; 　　,,,背景颜色:米色; 　　,,,显示:flex; 　　}

小程序应该怎么布局

图3

<强> 1.1.1容器属性:flex-direction

在.container1增加如下代码:表示设置flex布局纵向排列元素(从左到右为交叉轴,从上到下为主轴),如图2所示。(行:flex布局横向排列元素——从左到右为主轴,从上到下为交叉轴)

,flex-direction:列

<强> 1.1.2容器属性:flex-wrap

在.container1增加如下代码:同时在布局。wxml中复制元素代码到8个元素,编译运行,效果如图4所示,可以看出本来高宽为100 rpx正方形的观点已经变形为长方形。

flex-wrap: nowrap }

小程序应该怎么布局

如图4果修改为如下代码:编译运行如图5所示:保证每个子视图都是正方形,然后放不下的第8个放子视图到下一行

flex-wrap:包装

<强> 小程序应该怎么布局

图5

1.1.3容器属性:, 　　flex-flow

<>强flex-flow:包装行,编译运行结果:如图5所示,flex-flow相当于flex-direction和flex-wrap两个属性的组合

1.1.4容器属性:justify-content

在。container1增加如下代码:编译运行如图6所示,表示在主轴上的对齐方式,由于上面代码我们设置<强> flex-flow:包装行- - - - - - 相当于主轴为从左到右,所以一行显示不下的第8个元素在下一行居中显示,而前七个子视图,也在一行中居中显示,左右两侧就有空白留边

justify-content:中心

小程序应该怎么布局

图6

justify-content: flex-end (主轴为左到右情况下:右对齐)

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

小程序应该怎么布局

图7

justify-content: flex-start (主轴为左到右情况下:左对齐)不举例显示了 　　justify-content:空间- - -效果如图8所示,每个子视图左右都有留边

小程序应该怎么布的局