小程序flexbox layout布局 微信小程序 flexbox layout快速实现基本布局的解决方案

问题描述

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 代码

<view>
<image src="/pages/img/ 宣传图 2.jpg"></image>
<text> 从我做起 </text>
<text> 不信谣！不传谣！ </text>
<text> 相信政府！相信国家！ </text>
</view>
<view>
<text> 戴口罩，勤洗手 </text>
<text> 不扎堆，拒聚餐 </text>
<text> 吃熟食，禁野味 </text>
<text> 常通风，勿恐慌 </text>
<text> 早就医，莫轻视 </text> 
</view>

表 3.2.wxss 代码

.container1{
height: 80vh;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
color: red;
background-color: yellow
}
.container2{
background-color: yellow;
height: 20vh;
width: 70vh;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
color:blue
}
.view1{
height: 650rpx;
width: 550rpx
}

效果图展示：

图 3.1

对 flexbox layout 的属性总结：

弹性盒子布局具有六大属性：

（ 1 ） flex-direction 属性决定主轴的方向

row （默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column ：主轴为垂直方向，起点在上沿。

column-reverse ：主轴为垂直方向，起点在下沿

（ 2 ） flex-wrap属性决定元素的换行

nowrap （默认）：不换行。

wrap ：换行，第一行在上方

wrap-reverse：换行，第一行在下方。

（ 3 ） flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式

（ 4 ） justify-content 属性定义内容在主轴上的对齐方式。

flex-start（默认值）：左对齐。

flex-end：右对齐。

center ： 居中。

space-between：两端对齐，项目之间的间隔都相等。

space-around：每个项目两侧的间隔相等。

（ 5 ） align-items 属性定义项目在交叉轴上如何对齐。

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center ：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto ，将占满整个容器的高度。

（ 6 ） align-content 属性定义了多根轴线的对齐方式

flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center ：与交叉轴的中点对齐。

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch（默认值）：轴线占满整个交叉轴。

结语

flexbox layout 弹性盒子布局以上只是介绍了简单的容器属性。由上面的介绍和代码例子可以看出用它来对页面布局非常的方便和快捷，所写的代码也十分精简。掌握弹性盒子的容器属性就可以轻松的玩转小程序的页面布局，高效又简单。