小程序布局基础

flex：默认水平方向是主轴，可以设置垂直方向为交叉轴。rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。微信小程序规定屏幕的宽度为750rpx。无论是在iPhone6上面还是其他机型上面都是750rpx的屏幕宽度，拿iPhone6来讲，屏幕宽度为375px，把它分为750rpx后， 1rpx = 0.5px。不同的手机不同的rpx。

                 display：flex         12个属性如下

1. flex-direction：row 水平排列（主轴是从左到右）、column 垂直排列（主轴变成从上到下）
2. flex-wrap：  wrap   一行排不下的时候，换行； nowrap  不换行； wrap-reverse   换行加反转，第一行出现在最下面，依次向上排列第二行，第三行……
3. flex-flow： flex-direction和flex-wrap的简写。

   flex-flow：row  wrap；
   相当于
   flex-direction：row；
   flex-wrap：wrap；

4. justify-content：沿主轴对起方式，center  居中；flex-start  从起点对齐； flex-end 从终点对齐；space-around  每个元素占据空余空间相等；space-between  挨着页面两侧边缘的元素间隙为0，然后占据相等的空余空间。
5. align-items：沿交叉轴对齐方式，flex-start  从起点对齐； flex-end  从终点对齐； center  居中； stretch  当垂直方向为交叉轴的时候，没有设置高度，则会把元素高度设置整个页面高度，同理，交叉轴为水平方向时候，没有设置width，那么元素宽度就是整个页面的宽度。（stretch：拉长，拉直，有弹性）  baseline  以元素内第一行文字底边为基准对齐。
6. flex-grow：当容器有剩余空间的时候，元素占据多大比例，默认为0；例如设为2，则占据剩余空间的2份（具体是根据有多少个元素进行划分多少份）
7. flex-shrink：当空间不足时，元素缩小的比例，默认值为1.默认等比例缩小。
8. flex-basis：元素在主轴上占据的空间    如果flex-basis：n rpx;  不生效，那就把rpx换成px。
9. flex：是flex-grow、flex-shrink、flex-basis三个的缩写
10. order：定义元素的排列顺序。  

    <view class='container'>
      <view class="item" style='order: 4;'>
        1
      </view>
      <view class="item" style='order: 3;'>
        2 
      </view>
      <view class="item" style='order: 2;'>
        3
      </view>
      <view class="item" style='order: 1;'>
        4
      </view>
    </view>
    
    元素排列顺序 4 3 2 1

11. align-self：定义元素自身的对齐方式。
12. align-content：
13. 相对和绝对定位： 1.相对定位的元素是相对于自身的定位，参照物是自己；2.绝对定位的元素是相对于离他最近的一个已定位的父级元素进行定位。

还有一篇讲解flex布局可参考：click->here