小编给大家分享一下微信小程序开发中Flex布局的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
1: Flex布局
Flex布局如图1所示
1.1图1 Flex容器属性
1.2 Flex容器内元素属性
对齐如果定义会覆写掉容器属性中的justify-content,对齐项目设置的属性
微信小程序开发工程中,新建文件布局,然后新建各种文件(以布局命名),
在布局。wxml中加入如下代码:
在布局。wxs中加入如下代码:
编译运行如图2所示
注:上述代码中在container1容器中加入了4个子元素视图(item1) item1的样式文件中设置每个item1的宽高为固定值:100 rpx rpx为与屏幕尺寸相关缩放的单位,不同于固定的px,每个item1的边为1 px,实线(soliod),白色(# fff)
修改.container1如下:(增加显示:Flex;)编译运行如图3所示:可以看出Flex布局为默认横向排列元素
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
} 
如果修改为如下代码:编译运行如图5所示:保证每个子视图都是正方形,然后放不下的第8个放子视图到下一行
flex-wrap:包装
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:中心
justify-content: flex-end(主轴为左到右情况下:右对齐)
编译运行效果如图7所示:
justify-content: flex-start(主轴为左到右情况下:左对齐)不举例显示了
justify-content:空间- - -效果如图8所示,每个子视图左右都有留边
