微信小程序布局技巧（一）

前言

友情提示，阅读本文之前，可能需要有一点微信小程序开发基础。本文旨在为那些刚入坑微信小程序（文中后面统称小程序）或者入坑后对页面UI布局有困难的开发者，老鸟和大神请无视。如果你还没有任何小程序的基础，建议移步官方教程：
小程序官方教程

小程序布局方式

小程序是通过wxss（样式）和wxml（组件）组合，一起来实现UI排列和复杂布局，分为Block和flex两种布局方式。

Block布局方式

我们先来看一段代码：

// 未添加任何样式
<view>
  <view>test1</view>
  <view>test2</view>
</view>

最终呈现效果为：

可以看到未添加任何样式，默认为竖直排列的。熟悉移动开发的朋友可能要问了，那么我想要实现横向排列、垂直居中、水平居中、靠右，靠左等效果应该怎么做了？不要急，该来的可能会迟到，终归是不会缺席的。

flex布局方式

大家都知道小程序样式控制是通过wxss文件来控制，实现复杂布局一般我们都是通过flex布局方式来实现，要使用 flex 布局的话需要显式的声明：display:flex; 接下来我们就给上面的布局加上样式，使test1和test2两个view能横向排列。

wxss添加样式

// 横向布局
.page {
  display: flex;
  flex-direction: row;
}

wxml应用样式

<view class='page'>
  <view>test1</view>
  <view>test2</view>
</view>

效果

从效果图可以看到，已经达到了我们需要横向布局的效果了。

flex布局种类

首先我们不管是横向布局和竖向布局，要设置属性 flex-direction ,它有4个可选值：

• row：从左到右的水平方向为主轴
• row-reverse：从右到左的水平方向为主轴
• column：从上到下的垂直方向为主轴
• column-reverse：从下到上的垂直方向为主轴

为了能更好的看到效果，我们改动下代码，给每个view增加色块区分，然后分别展示每个值得不同排列效果：
row：

row-reverse：

column：

column-reverse：（parent view高度固定为750rpx效果）

相信不用我来解释，大家也能猜到这四个值分别能实现什么样的效果了吧。关于横向和纵向的布局我就不赘述了，各位看官可自行撸码体会。

除了上面提到的控制横向和纵向布局的属性了，常用的还有justify-content、align-items、flex-wrap等属性来辅助我们实现复杂的布局。

justify-content属性

这个属性指的是主轴方向上的子元素的布局方式，它有5个可选值：

• flex-start：主轴起点对齐(默认值)
• flex-end：主轴结束点对齐
• center：在主轴中居中对齐
• space-between：两端对齐，除了两端的子元素分别靠向两端的容器之外，其他子元素之间的间隔都相等
• space-around：每个子元素之间的距离相等，两端的子元素距离容器的距离也和其它子元素之间的距离相同
• 这里的主轴指的是父元素中的flex-direction属性指定的元素

还是分别来展示下效果（默认以横向排列为主轴）：
flex-start效果同前面横向排列相同，这里不做展示了

flex-end：

center:

space-between:

space-around:

align-items属性

这个属性指的是侧轴方向上的子元素的布局方式，它有5个可选值：

• stretch 填充整个容器，当元素未设置侧轴方向的长度时，充满父元素，如设置了侧轴方向长度，则以子元素设置的长度为准(默认值)
• flex-start 侧轴的起点对齐 （这里我们手动设置下子 view 的高度，来看的明显一些）
• flex-end 侧轴的终点对齐
• center 在侧轴中居中对齐
• baseline 以子元素的第一行文字对齐
• 这里的侧轴指的是父元素中的flex-direction属性指定的元素方向的垂直的方向

接下来分别来展示下效果（默认以纵向排列为主轴，用横向方向演示侧轴排列效果,横向宽度固定为750rpx，方便演示）：
stretch :（test1元素侧轴方向长度未设置，也就是未设置宽度，test2元素侧轴方向的长度(宽度)设置100rpx）

flex-start：

flex-end：

center ：

baseline：（以子元素的第一行文字对齐，由于文字显示必须横向排列，无法纵向排列，所以这里只能以横向排列为主轴显示效果）
修改下样式：

.page {
  display: flex;
  flex-direction: row;
  align-items: baseline;
}
.test1 {
  padding-top: 40rpx;
  text-align: center;
  width: 100rpx;
  height: 100rpx;
  background: green;
}
.test2 {
  width: 100rpx;
  height: 100rpx;
  background: red;
}

效果图：

flex-wrap 属性

这个属性用于控制子元素 是否换行，有3个值可选：

• nowrap：不换行（默认）
• wrap：换行
• wrap-reverse：换行，第一行在最下面

为了更好的显示效果，我们多增加几个元素来演示：
nowrap：

wrap：

wrap-reverse：

以上就是小程序开发中常用到的一些布局方式，将上面总结的这些属性都熟悉之后，相信聪明的你能举一反三，能解决绝大部分的布局问题，各位看官不妨自己撸码试试上面的这些效果。

应用

上面说了这么多理论知识，现在我们就来写个小例子来实操下，我们要实现效果是一个带删除按钮的矩形输入框，大概长下面的样子：

我们先写好布局，代码如下：

<view class='row'>
  <input class='input' placeholder='please input'/>
  <icon type='clear'/>
</view>

然后是样式：

.row{
  display: flex;
  flex-direction: row;//指定横向布局
  justify-content: flex-end;//主轴结束点对齐
  align-items: center;//侧轴居中(垂直居中)
  border: 1rpx solid #ccc;//边框
  margin: 20rpx;//边距，为了更加美观，不加没影响
  border-radius: 20rpx;//圆角
}

.input {
  padding-top: 10rpx;
  padding-bottom: 10rpx;
  flex: 1;
}

注释上面已经加的很清楚了，可以对照上面的知识点来解析这个布局和样式为什么要这么写，我这里只是实现一个很简单的例子，属于抛砖引玉的作用，相信各位读者肯定能实现更多丰富的布局效果。

尾巴

笔者才疏学浅，只是想着将自己的理解共享出来，以期能给需要帮助的能带来帮助。如果文中出现错误，欢迎拍砖指正，也欢迎给我留言。