3.1　页面布局

小程序与传统网页应用一样，通过页面来展示数据和提供交互，需要熟练掌握页面布局。在前端开发中，布局的传统解决方案是基于盒模型的，依赖显示、定位和浮动等属性来实现。后来又新增了Flex弹性布局方案，可以简洁、完整、响应式地实现各种页面布局。

3.1.1　盒模型

在网页开发中，可以将所有的HTML元素看作一个框。每个盒模型都由实际内容、内边距、边框和外边距四部分构成。在W3C标准盒模型模式下，width和height指实际内容的宽高，padding为内边距，border为边框，margin为外边距，如图3-1所示。

在小程序中，每个组件就相当于HTML中的元素，它们完全遵循W3C标准盒模型规范。值得注意的是，低版本的IE存在一定的兼容问题，这些浏览器的width和height属性是指内容、内边距和边框的宽度总和，称为IE盒模型。

3.1.2　显示、定位和浮动

大多数HTML元素被定义为块级元素或内联元素，不同显示类型的元素对于盒模型的处理方式也不同。显示类型通过display属性控制，block为块元素，inline为内联元素，none为隐藏元素。

块元素总是在新行上开始，宽高、行高及内外边距均可控制，宽度默认为100%，主要用来容纳内联元素和其他块元素。内联元素和其他块元素都在一行上，宽高、行高及内外边距不可改变，宽度就是文字或图片的宽度，仅用于容纳文本和其他内联元素。隐藏元素不会占用任何空间，即该元素将从页面布局中消失。

CSS中有3种确定元素位置的机制：普通流、定位和浮动。除非专门指定，否则所有的元素框都在普通流中。也就是说，普通流中元素的位置是按照HTML中书写的结构，通过盒模型原理计算出来的。

定位通过position属性来控制，属性值分为relative（相对定位）、absolute（绝对定位）和fixed（固定定位）。相对定位的元素框会偏移某个距离，但元素仍然占据其未定位前的位置。绝对定位的元素框从文档流中被完全删除，并相对于最近的、含有相对定位的祖先元素或整个页面进行偏移定位。元素原来在正常文档流中所占的空间将会关闭，就好像该元素从来不存在一样。元素定位后生成一个块级框，不论原来它在正常流中生成何种类型的框。因为绝对定位后元素将脱离普通流，所以它们可以覆盖页面上的其他元素，并通过设置z-index属性来控制堆放次序。固定定位与绝对定位类似，只是相对于视窗本身而言，不随页面滚动。

浮动通过float属性来控制，浮动框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，因此文档普通流中的块级框表现得就像浮动框不存在一样。元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用clear属性来清除浮动。

浮动刚开始主要用于图文混排，是解决文字环绕问题的，后来发现也可以解决多栏布局问题，从而得到广泛应用。

3.1.3　Flex布局

Flex布局是2009年W3C提出的一种新的布局方案，目前已经得到了所有浏览器和小程序的支持，将成为未来布局的首选方案。

Flex（Flexible Box，弹性布局）用来为盒模型提供最大的灵活性。任何一个容器都可以被设定为Flex布局，设定后，其子元素的float、clear和vertical-align属性将失效。采用Flex布局的元素称为Flex容器，它的所有子元素自动成为容器成员，称为Flex项目。

容器默认存在两条轴线：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）称为main start，结束位置称为main end；交叉轴的开始位置称为cross start，结束位置称为cross end。项目默认沿主轴排列。单个项目占据的主轴空间称为main size，占据的交叉轴空间称为cross size。

以下8个属性均可以设置在容器上。

●flex-direction：定义主轴的方向（即项目的排列方向）。

●flex-wrap：定义一条轴线排不下的换行方式。

●flex-flow：指flex-direction和flex-wrap的复合属性。

●flex-direction：定义灵活项目的方向。

●flex-wrap：定义灵活项目是否拆行或拆列。

●justify-content：定义项目在主轴上的对齐方式。

●align-items：定义项目在交叉轴上的对齐方式。

●align-content：定义多根轴线的对齐方式。

以下6个属性设置在项目上。

●order：定义项目的排列顺序，数值越小排列越靠前。

●flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间也不放大。

●flex-shrink：定义项目的缩小比例，默认为1，即如果空间不足该项目将缩小。

●flex-basis：定义在分配多余空间之前，项目占据的主轴空间。

●flex：flex-grow、flex-shrink和flex-basis的简写。

●align-self：允许该项目有与其他项目不一样的对齐方式，可覆盖容器align-items。