小程序flex容器

flex：默认：水平方向是主轴，垂直方向是交叉轴，分布在第四象限，项目时在主轴方向上排列，
排满之后在交叉轴方向上换行；
1.设置容器的属性
    display:flex
    通过设置坐标轴来设置项目的排列方向：
    flex-direction:row（默认值主轴横向） | row-reverse(方向从右到左) | column（从上到下） |column-reverse（从下到上）
    是否项目多行排列，以及多行排列时换行的方向
    flex-wrap:nowrap（默认值 不换行） | wrap（单行容不下时换行显示） | wrap-reverse（换行显示为wrap的反方向）
    设置项目在主轴方向的对齐方式，以及分配项目之间及其周围多余的空间
    justify-content:flex-start（默认值（项目对齐主轴起点，项目间不留空隙））
                    flex-end
                    center 项目在主轴上居中排列，项目间不留空隙
                    space-between  两端对齐
                    space-around  和space-between 很类似，用的时候查
                    space-evenly 项目之间的间距相等，包括两端的距离
    设置项目在行中的对齐方式
    align-items:stretch（默认值） 项目拉伸至填满行
                center    项目在行中居中对齐
                flex-end 项目底部与行终点对齐。
                baseline 项目与行的基线对齐。
                flex-start 项目顶部与行起点对齐。
    多行排列时，设置在交叉轴方向的对齐方式，以及分配行之间及周围的多余空间
    align-content:stretch（默认值） | flex-start | center |flex-end | space-between | space-around | space-evenl
2.设置项目的属性（多设置项目的尺寸，位置，以及对项目的对齐方式做特殊处理）
    order:0（默认值）设置在主轴方向的排列顺序，数值越小越靠前
    flex-shrink:1（默认值）当项目在主轴方向上溢出时，通过设置项目收缩因子来压缩项目适应容器。属性值为项目的收缩因子，属性值取非负数。
    flex-grow:0（默认值）当项目在主轴方向上还有剩余空间时，通过设置项目扩张因子进行剩余空间的分配。属性值为项目的扩张因子，属性值取非负数。
    flex-basis:auto（默认值）当容器设置flex-direction为row或row-reverse时，flex-basis和width同时存在，flex-basis优先级高于width，也就是此时flex-basis代替项目的width属性。
    flex:none | auto | @flex-grow @flex-shrink @flex-basis 是flex-grow，flex-shrink，flex-basis的简写方式。值设置为none，等价于00 auto。值设置为auto，等价于1 1 auto。
    align-self:auto（默认值） | flex-start | flex-end |center | baseline| stretch设置项目在行中交叉轴方向上的对齐方式，用于覆盖容器的align-items，这么做可以对项目的对齐方式做特殊处理。默认属性值为auto，继承容器的align-items值，当容器没有设置align-items时，属性值为stretch。
3.界面的效果反馈：
    1.hover-class：view和button中来显示用户按下之后的界面样式
    2.button组件的loading属性，在按钮的文字前面出现一个loading的
    3.wx.showModal({
      title: '标题',
      content: '告知当前状态，信息和解决方法',
      confirmText: '主操作',
      cancelText: '次要操作',
      success: function(res) {
        if (res.confirm) {
          console.log('用户点击主操作')
        } else if (res.cancel) {
          console.log('用户点击次要操作')
        }
      }
    })
    4.