一、flex布局方式

1.大家都知道小程序样式的控制是通过wxss文件来控制，实现复杂的布局一般我们都是通过flex布局方式来实现的，要使用flex布局的话需要显示的声明：display：flex；。接下来看样式布局

flex布局种类

首先我们不管是横向布局还是纵向布局，要设置属性flex-driection，它有4个可选值：

row：从左到的水平方向为主轴
row-reverse：从右到左的水平方向为主轴
column：从上到下的垂直方向为主轴
column-reverse：从下到上的垂直方向为主轴

除了上面提到的控制横向和纵向布局的属性了，常用的还有justify-content、align-items、flex-wrap等属性来辅助我们实现复杂的布局。

justify-content属性

这个属性指的是主轴方向上的子元素的布局方式，它有5个可选值：

flex-start：主轴起点对齐(默认值)
flex-end：主轴结束点对齐
center：在主轴中居中对齐
space-between：两端对齐，除了两端的子元素分别靠向两端的容器之外，其他子元素之间的间隔都相等
space-around：每个子元素之间的距离相等，两端的子元素距离容器的距离也和其它子元素之间的距离相同
这里的主轴指的是父元素中的flex-direction属性指定的元素方向（上述有介绍）

align-items属性

这个属性指的是侧轴方向上的子元素的布局方式，其实就是在控件内部文字或view中布局的位置，它有5个可选值：

stretch 填充整个容器，当元素未设置侧轴方向的长度时，充满父元素，如设置了侧轴方向长度，则以子元素设置的长度为准(默认值)
flex-start 侧轴的起点对齐（这里我们手动设置下子 view 的高度，来看的明显一些）
flex-end 侧轴的终点对齐
center 在侧轴中居中对齐
baseline 以子元素的第一行文字对齐
这里的侧轴指的是父元素中的flex-direction属性指定的元素方向的垂直的方向。
接下来分别来展示下效果（默认以纵向排列为主轴，用横向方向演示侧轴排列效果,横向宽度固定为750rpx，方便演示）：
stretch :（test1元素侧轴方向长度未设置，也就是未设置宽度，test2元素侧轴方向的长度(宽度)设置100rpx）

依次flex-start、flex-end、center

baseline：（以子元素的第一行文字对齐，由于文字显示必须横向排列，无法纵向排列，所以这里只能以横向排列为主轴显示效果，其实就是布局内文本中心的对齐）

.page {
display: flex;
flex-direction: row;
align-items: baseline;
}
.test1 {
padding-top: 40rpx;
text-align: center;
width: 100rpx;
height: 100rpx;
background: green;
}
.test2 {
width: 100rpx;
height: 100rpx;
background: red;
}

3.flex-wrap 属性

这个属性用于控制子元素是否换行，有3个值可选：

nowrap : 不换行（默认）
wrap ：换行
wrap-reverse ：换行，第一行在最下面（倒着排的）

二、定位（POSITION）布局方式

1.position属性允许你对元素进行定位常用的定位属性：

static ：元素框正常生成，块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中（系统默认）
relative ：元素框偏移某个距离，元素仍保持定位前的形状，它原来所占的控件保留（元素是相对自身进行定位，参照物是自己。即也称为相对定位）
absolute : 元素框从文档流中删除，并相对于其包含块定位，包含快可能是文档中的另一个元素或者初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框（元素是相对离它最近的一个已定位的父级元素进行定位。即也称为绝对定位）
fixed ：元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身

以上概念摘抄于网络，看了这些概念之后好像还是很模糊，怎么理解了，下面我就用例子来给大家展示各个属性的效果。

static

这个就像定义中说的一样，元素框正常生成，就是我们默认不设置position时的流程，这个没什么可说的。

relative

可能仅仅看上面的定义还是一脸懵逼的状态，简单来说，如果对一个元素进行相对定位（relative），它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。这样是不是好理解一点，下面我们看例子：

这里我们对view使用了relative定位属性，然后让其相对自身向右偏移50px，向下偏移100px，接下来我们看效果图（左边是不带偏移值得，右边是带偏移值得）：

absolute

运行效果图如下：

从图中可以看出，页面上view层次分辨的非常清楚。接下来我们给row里面加上acsolute

.row { display: flex; flex-direction: row; background: rosybrown; position: absolute; }

可以看到，就像上面说的一样，元素框从文档流中删除（从最外层的背景框不显示可以看出来）。那么为什么会出现这种效果了？其实在上面就已经给出了答案：元素是相对离它最近的一个已定位的父级元素进行定位。由于test1和test2这两个元素的父元素未定位，所以这两个元素就以最近的已定位的父级元素（窗口）进行定位，所以才有了上面显示的效果。为了证明我们的猜想，wxss做以下修改：