小程序——样式与布局

样式与布局

• 一、小程序样式
• • 1.1、定义样式
  • 1.2、使用样式
• 二、选择器
• • 2.1、基础选择器
  • 2.2、复合选择器
• 三、基础样式
• • 3.1、文本样式
  • 3.2、字体样式
• 四、盒子模型
• • 4.1、概述
  • 4.2、盒子模型属性
• 五、元素类别
• • 5.1、块级元素
  • 5.2、行内元素
  • 5.3、内联块级元素
• 六、flex布局
• • 6.1、flex容器属性
  • • 6.1.1、flex-direction属性
    • 6.1.2、flex-wrap属性
    • 6.1.3、justify-content属性
    • 6.1.4、align-items属性
    • 6.1.5、align-content属性
  • 6.2、flex项目属性
  • • 6.2.1、order属性
    • 6.2.2、flex-shrink属性
    • 6.2.3、flex-grow属性
    • 6.2.4、flex-basis属性
    • 6.2.5、align-self属性
• 七、layer布局
• • 7.1、绝对定位
  • 7.2、相对定位
  • 7.3、固定定位
• 八、float布局

一、小程序样式

1.1、定义样式

WXSS具有CSS的大部分特性，其书写规则由两部分组成：选择和声明，如图所示。

• 选择器(selector)：表明该样式将作用于哪些对象，这些对象可以是某个标签、指定的clss或id值等。在解析这个样式时，根据选择器来渲染对象的显示效果。
• 属性(property):样式的选择项。

自定义文字的字体为12px,颜色为红色，示例代码如下：

text {
	font-size: 12px; 
	color: #f00;
}

1.2、使用样式

内联样式：

在WXML文件中使用style可以直接设置组件的样式，示例代码如下：

<view style="width:150rpx;height:l50rpx">我是view容器<view>

上述代码中通过style对<view>组件设置属性，宽度和高度均设置为l50rpx。

外部样式：

1. 自动引用
   在小程序目录结构中，page文件夹中的样式为局部样式，只作用于对应的页面。app.wxss文件中的样式为全局样式，会作用于所有页面中具有相同选择器的组件，当局部样式出现与全局样式同名的选择器时，局部样式会覆盖全局样式。
2. 样式导入
   使用@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. 上、下、左、右的属性值相同时，简化为1个值。
   示例代码如下：

padding:1rpx 1rpx 1rpx 1rpx;
padding:1rpx;

2. 上、下和左、右的属性值分别相同时，简化为2个值。
   示例代码如下：

padding:1rpx 2rpx 1rpx 2rpx;
padding:1rpx 2rpx;

3. 左、右的属性值相同时，简化为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%，默认占一行的高度。在一行中两个块级元素无法并列排放(lot浮动后除外)，两个块级元素连续出现时，会在页面中自动换行显示。块级元素常作为页面布局的组织结构，内部可以嵌套块级元素和行内元素，小程序中<viw>容器默认为块级元素，内部可嵌入<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和vertica-align属性将失效。采用flex布局的容器，称为flex容器(flex container)。容器内部包含的子容器，称为flex项目(flex item),简称"项日"。flex布局发生在父容器和子容器之间，父容器需要有flex的环境，只有设置其属性display:flex后，子容器才能根据自身的属性来布局。简单地说，就是如果父容器有lex的环境，子容器就可以瓜分父容器的空间。如果父容器没有flex的环境，那么子容器就无法使用lex的规则来使用父容器的空间。lex模型如图所示。

在图中，父容器默认存在两根轴：水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置（与边框的交叉点）叫作main start,结束位置叫作main end;交叉轴的开始位置叫作cross start,结束位置叫作cross end;单个项目占据的主轴空间叫作main size,占据的交叉轴空间叫作cross size。项目默认沿主轴排列，默认属性为flex direction:row,水平轴从左向右，交叉轴为垂直方向自上而下；通过设置属性flex-direction:column能够将主轴与交叉轴的位置进行互换，即主轴变为垂直方向的自上而下，交叉轴变为水平方向的从左向右。在lx布局中，通过设置容器属性来控制内部项目的排列与对齐方式。

属性	说明	默认值	其它属性值
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;
}

row:

row-reverse:

column:

column-reverse:

6.1.2、flex-wrap属性

flex-wrap属性用于设置flex弹性盒子内部的项目是否允许项目换行以及换行时的方向，默认情况项目不换行。

其语法格式如下：

.container{
	flex-wrap:nowrap(默认值)|wrap wrap-reverse;
}

对应的属性值如下。

• nowrap:不允许换行，当容器中所有项目的宽度超过父容器时，可能会被压缩。
• wrp:当容器中所有项目的宽度超过父容器时，允许换行排列。
• 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;
}

nowrap:

wrap:

wrap-reverse:

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;
}

flex-start:

center:

flex-end:

space-between:

space-around:

space-evenly:

6.1.4、align-items属性

align-items属性用于设置flex弹性盒子内部的项目在交叉轴方向上的对齐方式。其语法格式如下：

.container{
	align-items: stretch(默认) | glex-start | center| flex-end | vaseline;
}

对应的属性值如下。

• 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;
}

stretch:

flex-start:

center:

flex-end:

6.1.5、align-content属性

align-content属性用于设置flex弹性盒子内部的项日进行多行排列时，在交叉轴方向上的对齐方式。其语法格式如下：

.container{
	align-content: stretch(默认) | flex-start | center | flex-end | space-between | sapce-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;
}

stretch:

flex-start:

center:

flex-end:

space-between:

space-around:

space-evenly:

6.2、flex项目属性

6.2.1、order属性

ordr属性用于设置项目在主轴方向上的排列顺序，默认值为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个项目的ord©r值分别为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布局

块级元素独占一行，如果需要两个块级元素并排显示，就可以使用lot(浮动)布局，默认情况下元素是不浮动的，通过设置属性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;
}