微信小程序flexboxlayout快速实现基本布局的解决方案-创新互联

问题描述

flexbox layout ——弹性盒子布局。弹性盒子可以快速的对小程序进行布局。一般传统的小程序布局方法对内容量少的页面而言很方便，但对页面比较复杂的来讲就很繁琐了。所以使用 flexbox layout 对小程序页面内容进行整体封装布局，这样既方便又快捷。那么如何使用弹性盒子快速实现小程序的基本布局呢？

传统的布局方式对布局目标的实现属性赋值非常的分散，严重依赖内容的大小和页面的结构，这样操作起来非常的麻烦。而弹性盒子就比较灵活、统一，可以对整个页面的布局进行总体把控设置。弹性盒子就是将页面的内容整体放进一个容器里面进行整体的有结构的布局设置让页面更加和谐。

解决方案

首先，对 flexbox layout 的使用方法进行简单介绍。

先将所需封装的内容放在一个 view 容器里面，再对该 view 容器定义一个 class 。然后需要在 wxss 里面对 class 进行设置布局。

在 wxss 中首先用 display ： flex 将 view 容器变成一个弹性盒子，但是弹性盒子默认的主轴方向是从左往右所以每个元素都是从左往右的放置。根据自己的需要修改主轴的方向。

这里以从上往下的主轴方向，垂直方向上均匀分布，元素在水平方向上居中显示为例。在 wxss 用 flex-direction ： column 来实现从上到下的布局。但是会发现段与段之间太紧促了，这个时候就需要让段落均匀分布，用 justify-content ： space-around 来实现。（注意：在使用 justify-content 的时候我们需要根据自己设置的布局方向对页面的高度（宽度）进行适配，小程序会根据你所设置的对段落间的空间进行调整。）。最后让元素在水平方向上居中显示，需要用 align-items ： center 来实现。

下面是用两个弹性盒子（一个是垂直方向，另一个是水平方向）布局的案例代码：

表 3.1.wxml 代码

 从我做起 
 不信谣！不传谣！ 
 相信政府！相信国家！ 


 戴口罩，勤洗手 
 不扎堆，拒聚餐 
 吃熟食，禁野味 
 常通风，勿恐慌 
 早就医，莫轻视  

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。