一、小程序样式
1.1、定义样式
WXSS 具有 CSS 的大部分特性，其书写规则由两部分组成：选择和声明。
- 选择器 (selector)：表明该样式将作用于哪些对象，这些对象可以是某个标签、指定的 class 或 id 值等。在解析这个样式时，根据选择器来渲染对象的显示效果。
- 属性 (property)：样式的选择项。
自定义文字的字体为 12px，颜色为红色，示例代码如下：
text{font-size: 12px;color: #f00;}
1.2、使用样式
内联样式：
在 WXML 文件中使用 style 可以直接设置组件的样式，示例代码如下：
<view style="width:150rpx;height:150rpx">我是 view 容器</view>
上述代码中通过 style 对 <view> 组件设置属性，宽度和高度均设置为 150rpx。
外部样式：
- 自动引用
在小程序目录结构中，page 文件夹中的样式为局部样式，只作用于对应的页面。app.wxss 文件中的样式为全局样式，会作用于所有页面中具有相同选择器的组件，当局部样式出现与全局样式同名的选择器时，局部样式会覆盖全局样式。 - 样式导入
使用 @import 语句可以将其他路径中的样式引入当前文件中，@import 后面需要注明外联样式表的相对路径，用'；'表示语句结束。
假设有一个公共样式 common.wxss，示例代码如下：
.bg-gray{background-color: gray;}
在其他的页面中都可以通过 @import 语句引入外部文件样式表，示例代码如下：
@import"common.wxss"
.bg-blue{background-color: blue;}
通过导入外部样式，.bg-gray 和 .bg-blue 样式均可以被当前页面使用。
二、选择器
选择器 (selector) 是标签与样式的纽带，在 WXSS 文件中常用的选择器有基础选择器和复合选择器。
2.1、基础选择器
标签选择器：
给标签设置样式，会自动指向该标签。语法：
标签选择器名 {属性：属性值；}
示例：
<text>这是一段文字</text>
text{color: red;}
class 选择器：
语法：
.类选择器名 {属性：属性值;}
选择器的名称自定义，名称应当醒目且具有意义，页面中一旦设置了类别选择器，页面中该标签都具有相同的样式。示例代码如下。
<text class="title">这是一行文字</text><text class="title">这是一行文字</text><text class="title">这是一行文字</text>
.title{color: red;}
id 选择器：
语法：
#选择器名 {属性：属性值;}
选择器的名称自定义，名称应当醒目且有意义。示例代码如下。
<text id="p-style">这是一行文字</text><text>这是一行文字</text>
#p-style{color: red;}
2.2、复合选择器
多元素选择器：
多元素选择器用于同时设置多个标签具有共同的样式。语法：
选择器，选择器，选择器，…{共有属性：属性值，}
选择器之间用逗号隔开。示例代码如下。
<view>我是 view 组件</view><text>我是 text 组件</text>
view, text{background-color: red;}
后代元素选择器：
后代元素选择器为标签的后代设置样式。语法：
选择器 1 选择器 2 选择器 3{属性：属性值，}
选择器之间用空格隔开。示例代码如下。
<view><image>存放图片</image></view>
view image{width: 50rpx;height: 100rpx;}
其中，view image 为后代元素选择器，设置 <view> 标签嵌套中的 <image> 图片大小，宽度为 50rpx，高度为 100rpx，后代元素选择器用于对特定元素进行设置。
三、基础样式
3.1、文本样式
文本样式决定页面中文字的排版，可以设置字符缩进、文字颜色、字符间距、文本对齐方式和装饰文字等，常用属性如表所示。
| 属性 | 说明 |
|---|---|
color | 设置文本的颜色 |
letter-spacing | 设置字符间距 |
line-height | 设置行高 |
text-align | 规定文本的水平对齐方式 |
text-decoration | 规定添加到文本的装饰效果 |
text-indent | 规定文本块首行的缩进 |
text-transform | 控制文本的大小写 |
vertical-align | 设置元素的垂直对齐方式 |
white-space | 设置如何给元素控件留白 |
word-spacing | 设置单词间距 |
text-align-last | 当 text-align 设置为 justify 时，最后一行的对齐方式 |
text-justify | 当 text-align 设置为 justify 时，指定分散对齐的方式 |
text-outline | 设置文字的轮廓 |
text-overflow | 指定文本溢出包含的元素，应该发生什么 |
text-shadow | 为文本添加阴影 |
text-wrap | 指定文本换行规则 |
word-break | 指定文字的断行规则 |
word-wrap | 是否对过长的单词进行换行 |
<view class="content">对段落首行缩进、文字颜色、字符间距、行高、水平对齐方式和装饰效果进行设置。</view>
.content{text-indent: 2em;color: #00f;letter-spacing: 20rpx;line-height: 60rpx;text-align: left;text-decoration: underline;}
3.2、字体样式
| 属性 | 说明 |
|---|---|
font | 复合属性，设置字体相关属性 |
font-family | 规定文本的字体系列 |
font-size | 规定文本的字体尺寸 |
font-style | 规定文本的字体样式 |
font-variant | 规定文本的字体大小写 |
font-weight | 规定字体的粗细 |
<text>设置字体样式</text>
text{font-family:"Microsoft YaHei";font-size: 50rpx;font-style: oblique;font-weight: bold;}
四、盒子模型
4.1、概述
当对一个文档进行布局 (layout) 时，浏览器的渲染引擎会根据标准之一的 CSS 基础盒子模型 (CSS basic box model)，将所有元素表示为一个个矩形的盒子。CSS 决定这些盒子的大小、位置及属性（例如颜色、背景、边框尺寸等）。盒子模型规定了内部处理的元素内容 (content)、内边距 (padding)、边框 (border) 和外边距 (margin) 的样式。
在盒子模型结构中，最内层为盒子的内容 (content)，向外依次是内边距 (padding top、padding-right、padding-bottom、padding-left)、边框 (border-top、border-right、border-bottom、border-left) 以及外边距 (margin-top、margin-right、margin-bottom、margin-left)。内边距、边框和外边距分别都有上、下、左、右 4 个属性，这 4 个属性可以同时应用于一个元素，也可以单独或部分应用于同一个元素。
在盒子模型中，很多样式需要指定方向，通常会有 4 个属性值，在 WXSS 文件中常遵循 TRBL 原则和相同合并原则来简化代码。
1. TRBL 原则
TRBL 原则按照 top、right、bottom、left 的方向来设置属性。
padding-top:1rpx;padding-right:2rpx;padding-bottom:3rpx;padding-left:4rpx;
上述代码遵循了 TRBL 原则，按照上、右、下、左的顺序顺时针的方向将代码合并成一行，其效果等同于下方代码：
padding:1rpx 2rpx 3rpx 4rpx;
2. 相同合并原则：
- 上、下、左、右的属性值相同时，简化为 1 个值。
示例代码如下：
padding:1rpx 1rpx 1rpx 1rpx; padding:1rpx;
- 上、下和左、右的属性值分别相同时，简化为 2 个值。
示例代码如下：
padding:1rpx 2rpx 1rpx 2rpx; padding:1rpx 2rpx;
- 左、右的属性值相同时，简化为 3 个值。
示例代码如下：
padding:1rpx 2rpx 3rpx 2rpx; padding:1rpx 2rpx 3rpx;
4.2、盒子模型属性
width 与 height
盒子模型使用 width 和 height 定义内容区域的大小。除此之外还可以通过 max-height、min-height 设置最大高度和最小高度，属性如表所示。
| 属性 | 说明 |
|---|---|
height | 设置元素的高度 |
max-height | 设置元素的最大高度 |
max-width | 设置元素的最大宽度 |
min-height | 设置元素的最小高度 |
min-width | 设置元素的最小宽度 |
width | 设置元素的宽度 |
padding 与 margin
padding 指内边距，即内容与边框之间的部分。内边距的属性有 4 种，分别为 padding-top、padding-right、padding-bottom 和 padding-left，其属性值可以是像素，也可以是百分比，通过设置内边距可以控制内容与边框的间隔。
margin 指外边距，主要用于设置元素之间的距离。外边距的属性有 4 种，分别为 margin-top、margin-right、margin-bottom、margin-left，其使用方法与内边距类似。padding 与 margin 的属性如表所示。
| 属性 | 说明 |
|---|---|
padding | 在一个声明中设置所有内边距属性 |
padding-top | 设置元素的上内边距 |
padding-right | 设置元素的右内边距 |
padding-bottom | 设置元素的下内边距 |
padding-left | 设置元素的左内边距 |
margin | 在一个声明中设置所有外边距属性 |
margin-top | 设置元素的上外边距 |
margin-right | 设置元素的右外边距 |
margin-bottom | 设置元素的下外边距 |
margin-left | 设置元素的左外边距 |
border
边框是内容与外部填充的边界，使用边框属性可以设置边框的样式，常见属性如表所示。
| 属性 | 说明 |
|---|---|
border | 在一个声明中设置所有的边框属性 |
border-color | 设置四条边框的颜色 |
border-style | 设置元素四条边框的样式 |
border-width | 设置四条边框的宽度 |
border-radius | 设置四条边框的边角形状 |
outline | 在一个声明中设置所有的轮廓属性 |
五、元素类别
小程序页面布局是指页面元素在页面中的显示位置，而页面元素与其他页面元素之间的位置关系会决定该页面元素在页面中的显示位置。所以在学习小程序的页面布局之前，开发者需要掌握页面元素的分类。根据展示特点的不同，页面元素分为块级元素、行内元素、内联块级元素 3 种。
5.1、块级元素
块级元素 (block element) 是一种以块状方式展示的容器，高度和宽度均可设置，默认宽度为 100%，默认占一行的高度。在一行中两个块级元素无法并列排放 (float 浮动后除外)，两个块级元素连续出现时，会在页面中自动换行显示。块级元素常作为页面布局的组织结构，内部可以嵌套块级元素和行内元素，小程序中 <view> 容器默认为块级元素，内部可嵌入 <text> <image> 等。通过设置属性 display:block 能够将元素设置为块级元素。
<view class="red">第一个块级元素</view><view class="blue">第二个块级元素</view><view class="green">第三个块级元素</view><view class="gray">第四个块级元素</view>
.red{background-color: red;}.blue{background-color: blue;}.green{background-color: green;}.gray{background-color: gray;}view{display: block;height: 200rpx;border: 1px solid black;}
5.2、行内元素
行内元素 (inline element) 一般嵌套在块级元素中使用，它只能容纳文本或者其他行内元素，高度和宽度均不可设置，WXML 的 <text> 就是行内元素。
<view class="red">第一个行内元素</view><view class="blue">第二个行内元素</view><view class="green">第三个行内元素</view><view class="gray">第四个行内元素</view>
.red{background-color: red;}.blue{background-color: blue;}.green{background-color: green;}.gray{background-color: gray;}view{display: inline;border: 1px solid black;}
5.3、内联块级元素
内联块级元素 (inline-block element) 同时具备块级元素和行内元素的特点，多个内联块级元素可以并列在同一行，并且高度和宽度都可以设置。例如，WXML 中的 <image> 是内联块级元素。通过设置属性 display:inline-block 能够将元素设置为内联块级元素。
<view class="red">第一个内联块级元素</view><view class="blue">第二个内联块级元素</view>
.red{background-color: red;}.blue{background-color: blue;}view{display: inline-block;height: 300rpx;width: 300rpx;border: 1px solid black;}
六、flex 布局
flex 是 Flexible Box 的缩写，意为'弹性布局'，为盒子模型提供最大的灵活性。任何一个容器都可以指定为 flex 布局。示例代码如下：
.view{display:flex;}
上述代码中将组件设置为 flex 布局后，子元素的 float、clear 和 vertical-align 属性将失效。采用 flex 布局的容器，称为 flex 容器 (flex container)。容器内部包含的子容器，称为 flex 项目 (flex item)，简称'项目'。flex 布局发生在父容器和子容器之间，父容器需要有 flex 的环境，只有设置其属性 display:flex 后，子容器才能根据自身的属性来布局。简单地说，就是如果父容器有 flex 的环境，子容器就可以瓜分父容器的空间。如果父容器没有 flex 的环境，那么子容器就无法使用 flex 的规则来使用父容器的空间。
在图中，父容器默认存在两根轴：水平的主轴 (main axis) 和垂直的交叉轴 (cross axis)。主轴的开始位置（与边框的交叉点）叫作 main start，结束位置叫作 main end；交叉轴的开始位置叫作 cross start，结束位置叫作 cross end；单个项目占据的主轴空间叫作 main size，占据的交叉轴空间叫作 cross size。项目默认沿主轴排列，默认属性为 flex-direction:row，水平轴从左向右，交叉轴为垂直方向自上而下；通过设置属性 flex-direction:column 能够将主轴与交叉轴的位置进行互换，即主轴变为垂直方向的自上而下，交叉轴变为水平方向的从左向右。在 flex 布局中，通过设置容器属性来控制内部项目的排列与对齐方式。
| 属性 | 说明 | 默认值 | 其它属性值 |
|---|---|---|---|
flex-direction | 项目的排列方向 | row | row-reverse column column-reverse |
flex-wrap | 项目是否换行 | nowrap | wrap wrap-reverse |
justify-content | 设置项目在主轴方向上的对齐方式 | flex-start | flex-end center space-between space-around space-evenly |
align-items | 设置项目在交叉轴方向上的对齐方式 | stretch | center flex-end baseline flex-start |
align-content | 当多行排列时，设置行项目在交叉轴方向上的对齐方式 | stretch | flex-start center flex-end space-between space-around space-evenly |
order | 设置项目在主轴上的排列顺序 | 0 | integer |
flex-shrink | 设置项目在主轴上溢出的收缩比率 | 1 | number |
flex-grow | 扩张在主轴方向上还有空间的项目 | 0 | number |
flex-basis | 代替项目宽/高的属性 | auto | length |
align-self | 设置项目在交叉轴上的对齐方式 | auto | flex-start center flex-end baseline stretch |
6.1、flex 容器属性
6.1.1、flex-direction 属性
flex-direction 属性决定主轴的方向，即 flex 弹性盒子内部项目在主轴的排列方向。其语法格式如下：
.container{flex-direction:row(默认值)row-reverse column column-reverse;}
对应的属性值如下。
- row(默认值)：主轴为水平方向，起点在左端。
- row-reverse：主轴为水平方向，起点在右端。
- column：主轴为垂直方向，起点在顶端。
- column-reverse：主轴为垂直方向，起点在底端。
<view class="flex-container"><view class="item">元素 1</view><view class="item">元素 2</view><view class="item">元素 3</view></view>
.flex-container{margin: 50rpx auto;width: 740rpx;height: 600rpx;border: 1px solid #000;display: flex;flex-direction: row;/* 更改 flex-direction 属性，从 row 依次替换为 row-reverse | column | column-reverse */}.item{width: 200rpx;height: 150rpx;line-height: 150rpx;border: 1px solid #000;text-align: center;background-color: skyblue;}
6.1.2、flex-wrap 属性
flex-wrap 属性用于设置 flex 弹性盒子内部的项目是否允许项目换行以及换行时的方向，默认情况项目不换行。
其语法格式如下：
.container{flex-wrap:nowrap(默认值)|wrap wrap-reverse;}
对应的属性值如下。
- nowrap：不允许换行，当容器中所有项目的宽度超过父容器时，可能会被压缩。
- wrap：当容器中所有项目的宽度超过父容器时，允许换行排列。
- wrap-reverse：当容器中所有项目的宽度超过父容器时，换行的方向与 wrap 反向。
<view class="flex-container"><view class="item">元素 1</view><view class="item">元素 2</view><view class="item">元素 3</view><view class="item">元素 4</view></view>
.flex-container{margin: 50rpx auto;width: 740rpx;height: 600rpx;border: 1px solid #000;display: flex;flex-wrap: nowrap;}.item{width: 200rpx;height: 150rpx;line-height: 150rpx;border: 1px solid #000;text-align: center;background-color: skyblue;}
6.1.3、justify-content 属性
justify-content 属性用于设置 flex 弹性盒子内部的项目在主轴方向上的对齐方式。其语法格式如下：
.container{justify-content:flex-start()center flex-end space-between space-around space-evenly;}
对应的属性值如下。
- flex-start：项目对齐于主轴起点，项目之间不留空隙。
- center：项目在主轴上居中排列，位于容器的中心，项目之间不留空隙。
- flex-end：项目对齐于主轴终点，项目之间不留空隙。
- space-between：项目间距相等，第一个和最后一个项目分别靠在主轴的起点和终点。
- space-around：第一个项目离主轴的起点和最后一个项目离主轴的终点的距离是中间相邻项目间距的一半。
- space-evenly：第一个项目离主轴起点以及最后一个项目离主轴的终点的距离以及中间相邻项目间距均相等。
<view class="flex-container"><view class="item">元素 1</view><view class="item">元素 2</view><view class="item">元素 3</view></view>
.flex-container{margin: 50rpx auto;width: 740rpx;height: 600rpx;border: 1px solid #000;display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;}.item{width: 200rpx;height: 150rpx;line-height: 150rpx;border: 1px solid #000;text-align: center;background-color: skyblue;}
6.1.4、align-items 属性
align-items 属性用于设置 flex 弹性盒子内部的项目在交叉轴方向上的对齐方式。其语法格式如下：
.container{align-items:stretch(默认) | flex-start | center| flex-end | baseline;}
对应的属性值如下。
- stretch：当项目大小未设置时项目会被拉伸至填满交叉轴。
- flex-start：项目对齐于交叉轴起点。
- center：项目在交叉轴居中对齐。
- flex-end：项目对齐于交叉轴终点。
- baseline：项目对齐于基线上，未设置基线时等同于 flex-start。
<view class="flex-container"><view class="item">元素 1</view><view class="item">元素 2</view><view class="item">元素 3</view></view>
.flex-container{margin: 50rpx auto;width: 740rpx;height: 600rpx;border: 1px solid #000;display: flex;flex-direction: row;flex-wrap: nowrap;align-items: stretch;}.item{width: 200rpx;/* 当 align-items 值为 stretch 时，删掉 height 属性 *//* height: 150rpx; */line-height: 150rpx;border: 1px solid #000;text-align: center;background-color: skyblue;}
6.1.5、align-content 属性
align-content 属性用于设置 flex 弹性盒子内部的项目进行多行排列时，在交叉轴方向上的对齐方式。其语法格式如下：
.container{align-content:stretch(默认) | flex-start | center | flex-end | space-between | space-around | space-evenly;}
对应的属性值如下。
- stretch：未设置项目大小时将项目拉伸至填满交叉轴。
- flex-start：项目在交叉轴起点对齐。
- center：项目在交叉轴居中对齐。
- flex-end：项目在交叉轴终点对齐。
- space-between：行间距相等，首行与尾行靠在交叉轴起点和交叉轴终点。
- space-around：行间距相等，首行离交叉轴起点和尾行离交叉轴终点的距离为行间距的一半。
- space-evenly：首行离交叉轴起点和尾行离交叉轴终点的距离与行间距相等。
多行排列时需要设置 flex-wrap 属性值为 wrap 允许换行。
<view class="flex-container"><view class="item a">元素 1</view><view class="item b">元素 2</view><view class="item c">元素 3</view><view class="item b">元素 4</view><view class="item a">元素 5</view></view>
.flex-container{margin: 50rpx auto;width: 740rpx;height: 600rpx;border: 1px solid #000;display: flex;flex-direction: row;flex-wrap: wrap;align-content: stretch;}.item{width: 200rpx;/* 当 align-items 值为 stretch 时，删掉 height 属性 */height: 100rpx;line-height: 100rpx;border: 1px solid #000;text-align: center;background-color: skyblue;}.a{width: 300rpx;}.b{width:350rpx;}.c{width:400rpx;}
6.2、flex 项目属性
6.2.1、order 属性
order 属性用于设置项目在主轴方向上的排列顺序，默认值为 0，容器中的项目会按照数值从小到大排列。其语法格式如下：
.item{order: <integer>;}
<view class="flex-container"><view class="item a">元素 1</view><view class="item b">元素 2</view><view class="item c">元素 3</view></view>
.flex-container{margin: 50rpx auto;width: 740rpx;height: 600rpx;border: 1px solid #000;display: flex;flex-direction: row;}.item{width: 200rpx;/* 当 align-items 值为 stretch 时，删掉 height 属性 */height: 100rpx;line-height: 150rpx;border: 1px solid #000;text-align: center;background-color: skyblue;}.a{order: 1;}.b{order: 2;}.c{order: 3;}
将容器中主轴方向设置为水平从左到右，3 个项目的 order 值分别为 1、2、3，按照从小到大的顺序依次排列。
6.2.2、flex-shrink 属性
flex-shrink 属性用于设置项目的收缩比率，当超出主轴方向上父容器的宽度，按照比例对项目进行压缩。其语法格式如下：
.item{flex-shrink:1(默认) | <number>;}
flex-shrink 的默认值为 1，如果没有定义该属性，将会自动按照默认值进行压缩。
压缩总权重的计算公式如下：
压缩总权重=长度 1×收缩因子 1+ 长度 2×收缩因子 2+...+ 长度 N×收缩因子 N
被移除流出量的计算公式如下：
被移除溢出量=原长度×溢出长度×收缩因子/压缩总权重
被压缩后的长度的计算公式如下：
被压缩后的长度=原长度 - 被移除溢出量
以水平方向为例，假设有 3 个项目 a、b、c 宽度均为 300rpx，项目的收缩因子分别为 1、2 和 3。
.a{width: 300rpx;flex-shrink: 1;}.b{width: 300rpx;flex-shrink: 2;}.c{width: 300rpx;flex-shrink: 3;}
假设父容器宽度为 600rpx，主轴水平从左向右，3 个项目的宽度均为 300rpx，会导致溢出 300rpx，现计算每个容器被压缩后的实际长度。
首先计算压缩总权重：
压缩总权重：300X1+300X2+300X3=1800rpx
然后计算每个容器被移除的溢出量：
a 被移除溢出量：300X(300X1/1800)≈50rpx
b 被移除溢出量：300X(300X2/1800)≈100rpx
c 被移除溢出量：300X(300X3/1800)≈150rpx
最后计算每个容器被压缩后的宽度：
a 被压缩后的宽度：300-50=250rpx
b 被压缩后的宽度：300-100=200rpx
c 被压缩后的宽度：300-150=150rpx
由上例可以看出：收缩因子不同，每个容器被压缩后的宽度也不相同，收缩因子数值越大，被移除溢出量越大。
<view class="flex-container"><view class="item a">元素 1</view><view class="item b">元素 2</view><view class="item c">元素 3</view></view>
.flex-container{margin: 50rpx auto;width: 600rpx;height: 600rpx;border: 1px solid #000;display: flex;flex-direction: row;flex-wrap: nowrap;}.item{height: 100rpx;line-height: 100rpx;border: 1px solid #000;text-align: center;background-color: skyblue;}.a{width: 300rpx;flex-shrink: 1;}.b{width: 300rpx;flex-shrink: 2;}.c{width: 300rpx;flex-shrink: 3;}
6.2.3、flex-grow 属性
flex-grow 属性用于设置项目的扩张比率。当项目在主轴方向上留有剩余空间时，通过对项目按照比例扩张来覆盖剩余空间。其语法格式如下：
item{flex-grow:0(默认值) | <number>;}
flex-grow 的默认值为 0，如果没有定义该属性，项目不扩张。
扩张量的计算公式如下：
扩张量=剩余空间/（扩张因子 1+ 扩张因子 2+…+ 扩张因子 N)
被扩张后长度的计算公式如下：
被扩张后长度=原长度 + 扩张单元×扩张因子
以水平方向为例，假设有 3 个项目 a、b、c 宽度均为 200px，项目的扩张因子分别为 1、2、3。
.a{width: 300rpx;flex-grow: 1;}.b{width: 300rpx;flex-grow: 2;}.c{width: 300rpx;flex-grow: 3;}
假设父容器宽度为 600rpx，3 个项目的宽度均为 100rpx，会导致剩余空间为 300rpx，现计算每个容器被扩张后的实际长度。
首先计算扩张量：300/(1+2+3)=50rpx
然后计算每个容器的被扩张量：
a 被扩张量：50×1=50rpx
b 被扩张量：50X2=100rpx
c 被扩张量：50×3=150rpx
最后计算每个容器被扩张后的宽度：
a 被扩张后的宽度：100+50=150rpx
b 被扩张后的宽度：100+100=200rpx
c 被扩张后的宽度：100+150=250rpx
由上例可以看出：扩张因子不同，每个容器被扩张后的宽度也不相同，扩张因子数值越大，被扩张量越大。
<view class="flex-container"><view class="item a">元素 1</view><view class="item b">元素 2</view><view class="item c">元素 3</view></view>
.flex-container{margin: 50rpx auto;width: 600rpx;height: 600rpx;border: 1px solid #000;display: flex;flex-direction: row;}.item{height: 100rpx;line-height: 100rpx;border: 1px solid #000;text-align: center;background-color: skyblue;}.a{width: 300rpx;flex-grow: 1;}.b{width: 300rpx;flex-grow: 2;}.c{width: 300rpx;flex-grow: 3;}
6.2.4、flex-basis 属性
flex-basis 属性用于代替主轴方向上项目的宽或高。
其语法格式如下：
.item{flex-basis:auto(默认) | <number> }
对应的属性值如下。
- 当容器属性设置为 flex-direction:row 或 flex-direction:row-reverse 时，如果 flexbasis 和 width 属性同时存在数值时，flex-basis 会代替 width 属性。
- 当容器属性设置为 flex-direction:column 或 flex-direction:column-reverse 时，如果 flex-basis 和 height 属性同时存在数值时，flex-basis 会代替 height 属性。
- 数值的优先级高于 auto，如果 flex-basis 属性值为 auto，当项目设置了高度或宽度时会取代 auto。
<view class="flex-container"><view class="item a">元素 1</view><view class="item b">元素 2</view><view class="item c">元素 3</view></view>
.flex-container{margin: 50rpx auto;width: 740rpx;height: 600rpx;border: 1px solid #000;display: flex;flex-direction: row;}.item{height: 100rpx;line-height: 100rpx;border: 1px solid #000;text-align: center;background-color: skyblue;}.a{width: 300rpx;flex-basis: 200rpx;}.b{width: 300rpx;}.c{width: 300rpx;}
6.2.5、align-self 属性
align-self 属性用于单独为 flex 弹性盒子内部的项目设置在交叉轴方向上的对齐方式，其属性会覆盖容器的 align-items。其语法格式如下：
.item{align-self:auto(默认)| stretch| flex-start| center| flex-end | baseline;}
对应的属性值如下。
- auto：默认项目继承父容器设置的 align-items 的属性，如果没有设置，auto 替换为 stretch。其他属性与 align-items 一致。
<view class="flex-container"><view class="item a">元素 1</view><view class="item b">元素 2</view><view class="item c">元素 3</view><view class="item d">元素 4</view></view>
.flex-container{margin: 50rpx auto;width: 740rpx;height: 600rpx;border: 1px solid #000;display: flex;flex-direction: row;}.item{width: 200rpx;line-height: 100rpx;border: 1px solid #000;text-align: center;background-color: skyblue;}.a{align-self: stretch;}.b{height:100rpx;align-self: flex-start;}.c{height: 100rpx;align-self: center;}.d{height: 100rpx;align-self: flex-end;}
七、layer 布局
7.1、绝对定位
将元素设置为绝对定位，首先设置元素的属性 position:absolute，该元素会相对于最近的一个具有定位属性的父元素作为参考，然后通过 top、bottom、left、right 属性设置上、下、左、右的偏移量完成绝对定位。如果不存在具有定位属性的父元素，该元素会以屏幕左上方的节点作为参考。
<view>使用绝对定位</view>
view{width: 300rpx;height: 500rpx;position: absolute;left: 200rpx;top: 200rpx;background-color: skyblue;border: 1px solid #000000;}
7.2、相对定位
相对定位表示子元素相对于父元素作为参考的一种定位方式，子元素设置其属性 position:absolute，父元素设置其属性 position:relative，然后通过 top、bottom、left、right 属性设置上、下、左、右的偏移量完成相对定位。
<view class="item1"><view class="item2">使用相对定位</view></view>
.item1{position: relative;width: 700rpx;height: 400rpx;border: 1px solid #000;margin-top: 150rpx;}.item2{position: relative;width: 150rpx;height: 100rpx;left: 490rpx;top: 230rpx;background-color: skyblue;border: 1px solid #000;}
7.3、固定定位
固定定位用于将元素固定在屏幕中，不会随着页面的滚动而发生位置变化，需要设置其属性 position:fixed，元素位置的定位与绝对定位的方式类似，不同之处在于元素会始终位于屏幕的某个位置。
<view class="item">使用固定定位</view>
.item{position: fixed;width: 90%;height: 130rpx;background-color: skyblue;margin-top: 1000rpx;border: 1px solid #000000;}
八、float 布局
块级元素独占一行，如果需要两个块级元素并排显示，就可以使用 float(浮动) 布局，默认情况下元素是不浮动的，通过设置属性 float:left 表示元素向着屏幕左边浮动，设置属性 float:right 表示元素向着屏幕右边浮动，浮动的条件必须是子元素的总宽度小于父容器的宽度。
<view class="left">左浮动</view><view class="left">左浮动</view><view class="left">左浮动</view><view class="right">右浮动</view><view class="right">右浮动</view><view class="right">右浮动</view>
view{width: 150rpx;height: 250rpx;border: 1px solid #ffffff;background-color: skyblue;}.left{float: left;}.right{float: right;}
