微信小程序视图容器

一.view
相等于html中的

标签，有4个属性；
hover和hover-class与点击效果有关，分别设置是否启用点击和设置点击效果；
hover-start-time和hover-stay-time与点击的时间有关；
使用bindtap属性进行事件绑定；
微信小程序页面布局采用FLEX布局，为“弹性布局”；
（1）display：block；块内容器模式；
（2）display：flex；行内容器模式；

  1
  2
  3


  1
  2
  3


.flex-row{
  width: 100px;
  height: 150px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.flex-view-item1{
  height: 50px;
  background-color: #ff5400;
}

1、flex container（容器）的属性：
row：从左到右的水平方向为主轴；
row-reverse:从右到左的水平方向为主轴；
column：从上到下的垂直方向为主轴；
column-reverse：从下到上的垂直方向为主轴；
2、flex-wrap属性
在子元素都排成一条线（“轴线”）上时。flex-wrap属性定义；如果一条轴线排不下时，如何换行；
wrap：表示一行排不下时，就换行；
nowrap：表示一行排不下时也不换行；
wrap-reverse：换行，第一行在下方；
3.justify-content属性
定义了项目在主轴上的对齐方式：
flex-start:主轴起点对齐（水平居左对齐,默认值）
flex-end:主轴结束点对齐（水平居右对齐）；
space-between:两端对齐，两端的子元素贴容器边，其他子元素间的间隔相等；
4、align-items属性；
定义子元素在侧轴上的对齐方式，
stretch：填充整个容器；
flex-start：侧轴的起点对齐；
flex-end:侧轴的终点对齐；
center：在侧轴的中间居中对齐；
baseline：以子元素的第一行文字对齐；
5、align-content属性
flex-start:在交叉轴的起点对齐；
flex-end:在交叉轴的终点对齐；
center:在交叉轴的中点对齐；
space-between:在交叉轴两端对齐；轴线之间的间隔平均分布；
space-around:每根轴线两侧的间隔都相等；所以，轴线之间的间隔比轴线与边框的间隔大一点；
stretch:在交叉轴两端对齐；轴线占满整个交叉轴，项目被拉伸以适应容器；