3.1 view视图组件

view视图组件是小程序界面系统中最基础的视图组件。学习组件，最重要的是学习组件的属性。小程序组件系统中有一些属性是公共的，即所有组件都用这些属性。小程序组件通用属性如表3-1所示。

3.1.1 view视图组件核心属性

view视图组件中提供的常用属性如表3-2所示。

3.1.2 组件flex布局

view视图组件常作为布局容器用来布局和组合其他子组件。例如，进行简单的、从上到下的列布局，首先在index.wxml中编写如下测试代码，搭建页面结构：

上述代码定义了一个容器view视图，并在其中定义了3个view子视图，为其设置class属性后，在index.wxss文件中编写如下代码：

运行代码，效果如图3-1所示。

上述代码使用了flex布局，在这种布局模式下，可以将布局容器想象成一个有弹性的盒子，其尺寸大小由其中的子组件决定，子组件的宽度或高度会将父容器撑满。使用flex布局需要将组件样式表中的display属性设置为flex。flex布局中有如下几个重要的属性需要了解。

1.flex-direction

flex-direction属性用来设置布局的主轴方向，即子元素的排列方向，其可选值有如下几种：row、row-reverse、column、column-reverse。row表示行布局，子元素从左向右排列；row-reverse也表示行布局，子元素从右向左排列；column表示列布局，子元素从上到下排列；column-reverse也表示列布局，子元素从下到上排列。

2.flex-wrap

flex-warp设置换行模式：默认值为nowarp不进行换行；设置为warp，当元素尺寸溢出时会进行换行；设置为warp-reverse则会逆向进行换行，即第一行在下。

3.justify-content

justify-content属性设置子元素在主轴方向上的对齐方式：flex-start表示左对齐；flex-end表示右对齐；center表示居中对齐；space-between表示两端对齐；space-around表示等间隔对齐。

4.align-items

align-items设置元素在次轴上的对齐方式，次轴方向与主轴方向垂直：设置flex-start为正方向对齐，行布局则表示从左到右，列布局则表示从上到下；flex-end的对齐方向与flex-start相反；center则进行居中对齐。

5.align-content

align-content属性比较难理解，它用来设置当弹性盒中有多个轴线时的内容整体对齐方式。例如，如果出现了换行，这个属性可以设置整体的对齐方式，设置为stretch则内容会整体充满，设置为flex-start表示正方向对齐，设置为flex-end表示逆方向对齐，设置为center表示居中对齐，设置为space-between表示两端对齐，设置为space-around表示等间隔对齐。

上面介绍的这些属性都是用在作为容器的组件上的，对于flex布局的子组件，也有一些属性可以用来设置，如表3-3所示。