微信小程序开发新手篇——页面布局

容器作用：通常作为一个容器元素，用于包裹和排列其他元素（如文本、图片、按钮等）。布局和样式化：你可以通过 CSS 样式或小程序的 .wxss文件对 元素进行布局和样式设置，比如设置宽度、高度、背景色、边距、对齐方式等。响应用户操作： 元素可以监听用户的交互事件，比如点击事件（bindtap）等。

通俗来讲，容器就像是一个大箱子，大箱子里面可以装许许多多的小箱子，我们能够对于箱子以及箱子内部的箱子进行各种各样的限定，就可以使得整个页面符合我们的想象。

我们可以通过以下一个界面来更加深入地了解容器。

容器的摆放

在上述页面中，我们可以将页面首先整体视为一个；然后在这个内分成了三部分，分别是顶部栏，内容栏，以及底部栏；然后在内容栏内又可以分成文字问候部分、登陆部分、信息显示部分、开卡部分、点餐部分（在每个部分内部又可以继续细分成不同的容器，在此不再赘述），故而整体的内容结构用代码可以简要表示为：

顶部栏

问候语

登录

信息

开卡

点单

底部栏

这里为没有编程基础的同学简要解释一下，在.wxml文件所使用的语言中，我们每一个容器都需要以一个<***>开头，再以一个<\***>结尾，一般情况下我们以开头，以结尾（当然还存在别的，笔者会在之后的章节中进行说明），以class属性来定义当前容器的名称，这将对于我们之后在.wxss文件中对容器进行进一步的规范与美化具有重要意义。

容器与容器之间的关系可以概括为平级关系与父子关系。当几个容器都是上一级容器内部的同级别容器时，上一级容器就称为父容器，它们并称为子容器。

所有子容器都共享父容器对于内部容器的排列设定（如居中、均匀排布等），而子容器内部的容器（孙容器？）又只遵循它们的父容器的设定，而与父容器的父容器无关。这意味着我们对于每个容器设计样式时，需要不断地对于其内部容器如何排列进行设计，不要想当然地认为其沿袭了父容器的排列样式。

容器的美化

当我们确定好所有容器的摆放的顺序后，我们就可以进一步对其样式进行设计了，以使得其符合我们的想象。

最基础的设计是对容器的整体大小与位置进行设计。

设定容器大小

前文已经讲到，当我们在.wxss文件中需要对某个特定的容器进行样式设计时，需要知晓其名称，也即class，然后以如下代码所述的形式对其进行设计，之后不再赘述。

.container {

width: 200px; /* 宽度 */

height: 150px; /* 高度 */

}

其中的px是指的像素单位，然而不同手机的屏幕大小不一，使用像素时所呈现的容器大小固定，而不能随着屏幕大小的不同而自适应地变化。在微信小程序当中特别设计了rpx，会根据屏幕宽度自动适配。除此之外还可以使用%（直接根据父容器的相同属性的百分比进行换算）、vh（页面高度的1%）、vw（页面宽度的1%）等单位。

我们设定容器的宽度使用width，设定高度使用height。

控制容器位置

控制容器自身位置

我们使用position控制容器的位置基准，使用 top、right、bottom、left 定义容器基于基准之下的位置。其中position的值有以下三种：

static：默认定位，处于文档流当中的默认位置。relative: 相对定位，相对于它在文档流中的默认位置进行偏移。absolute: 绝对定位，相对于最近的relative父容器进行定位。fixed: 固定定位，常用于固定在屏幕的某个位置。

第三种fixed相对好理解，就是将容器固定在页面的某个位置，其基准是整个页面，而另外两种肯定是有点难以理解的，我这里进行进一步地展开以方便读者更深入地理解position的三种值的区别。

relative

relative 表示相对定位。相对定位的元素会保持它在文档流中的默认位置，然后可以根据 top、right、bottom 、left进行偏移，但尽管偏移了原本所在的位置依然会保留（即不影响页面中其他元素的布局）。

比如当前容器的父容器设定了内部容器的排列方式为从上到下顺序排列，且自身的position设定为relative。当我设定当前容器的position属性为relative，偏移量为0时，每个容器都占据了文档流的一部分空间，如图所示。

当我对其中的第一个容器添加偏移后（如bottom：20px；right: 40px；），此时布局就会变成：

由于position属性的值是relative，所以每个容器在文档流当中的默认位置是不变的，偏移后原本所在的位置仍会保留。

absolute

当我将position修改为absolute后，第一个容器就会脱离当前文档流，不再遵从父容器的排列设定，转而向上寻找position为relative属性的父容器，基于该父容器的位置来进行偏移，原先的位置消失，如图所示。

希望读者至此可以体会到所谓的relative与absolute的区别，在我们开发的过程中，一般情况下不需要额外对position进行设定（默认为static），如果需要微调容器的位置时设定为relative，当需要精确控制容器在页面中的位置并且让容器脱离正常的文档流时设定为absolute。

控制容器内部容器位置

给内部容器设定排列方式时，通常会使用 Flexbox 布局来实现，这种布局方式非常适合控制容器内部子元素的排列。通过设置父容器的 display 为 flex，可以使用多个属性来控制子元素在主轴（横向或纵向）上的排列方式。

flex-direction（主轴方向）

决定子元素沿着主轴排列的方向。主轴可以是水平的，也可以是垂直的。

row：子元素沿主轴从左到右排列（默认值）。row-reverse：子元素沿主轴从右到左排列。column：子元素沿主轴从上到下排列。column-reverse：子元素沿主轴从下到上排列。

justify-content（主轴上的对齐方式）

控制子元素在主轴方向上的对齐方式。

flex-start：子元素从主轴的起点开始排列。flex-end：子元素从主轴的终点开始排列。center：子元素在主轴上居中排列。space-between：子元素均匀分布，左右两端没有间距。

align-items（交叉轴上的对齐方式）

控制子元素在交叉轴上的对齐方式。

flex-start：子元素在交叉轴的起点对齐。flex-end：子元素在交叉轴的终点对齐。center：子元素在交叉轴上居中对齐。

flex-wrap（是否换行）

决定子元素是否在父容器内换行。

nowrap：子元素不换行，默认值。wrap：子元素换行，超出父容器宽度时，元素会换到下一行。

align-content（多行的对齐方式）

在有多行子元素时，控制这些行在交叉轴上的对齐方式。这个属性在有多行内容时才会生效（当 flex-wrap 设置为 wrap 后）。

flex-start：行从交叉轴的起点开始排列。flex-end：行从交叉轴的终点开始排列。center：行在交叉轴上居中排列。space-between：行均匀分布，第一行在起点，最后一行在终点。space-around：行均匀分布，行之间有间距。

这些内容相对比较好理解，读者可以自行尝试。

综上所述，笔者为大家总结了容器的相关概念，当然还有部分内容尚未完全写明，如background-color、不同类型的容器（如scroll-view、image、button等）、容器的绑定事件bindtap、margin/padding等内容，等笔者慢慢更新吧。