一、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做以下修改：
这个显示就和上一个一样了，三个层次分明，主要是test1与test2父元素确定了定位，正常显示
fixed
效果图如下（为了更好看出效果，使列表可以滑动，当滑动列表时，红色方块会一直"浮动"在那里不会变动，这个就是我认为的fixed效果）：
而当把红色方块的postion属性修改成absolute时，红色方块则会跟随整个列表上面滑动。到这里应该都知道fixed属性的作用了，至于能实现什么样的效果，相信每位读者的心中都有了自己的答案。
定位元素定位元素分别为：
- top ：元素向下偏移位置
- right ：元素向左偏移位置
- bottom ：元素向上偏移位置
- left ：元素向右偏移位置
定义position不为static的元素。（前面留的疑问就是因为默认static属性的时候是不支持定位元素的）
取值：auto／直接数值／百分比
定义position不为static的元素。设置元素在当前上下文中的层叠级别。数值越大显示在上面，数值越小，则显示在下面。
//wxss 设置absolute让图片铺满父窗台 .splash { position: absolute; width: 100%; height: 100%; }
最后是交流公众号，大家可以关注一下
